我正在建立一個HTML，CSS的縮略圖網格，旋轉的拇指，拇指的背面是一個href鏈接。出於某種原因，只有部分鏈接是可點擊的。只有一個href鏈接的一部分是活動的

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
<div class="flipper"> 
    <div class="front"> 
     front 
    </div> 
    <div class="back"> 
     back 
     <p><a href="index.html">Find out more</a></p> 
    </div> 
</div>

請參閱我的jsfiddle http://jsfiddle.net/brm3z2dk/3/

來源

2014-09-03 JakeKempo

我能夠單擊鏈接文本的任何地方.. – Rex 2014-09-03 04:12:36

@Rex我體驗到Chrome瀏覽器（半鏈接激活）同樣的問題 – Raptor 2014-09-03 04:13:41

鏈接似乎只能在「重」在Chrome – Jason 2014-09-03 04:14:38

如果你想整個DIV的點擊使用onclick="location.href='index.html';"和更新的代碼可在http://jsfiddle.net/brm3z2dk/7/

來源

2014-09-03 04:22:58

添加到您的CSS文件或追加.back

.back { 
transform: rotateY(180deg) translateZ(1px); 
width: 200px; 
height: 150px; 
padding: 10px; 
background-color: rgb(29, 140, 194); 
font-size: 22px; 
color: rgb(255, 255, 255); 
font-weight: 300; 
line-height: 1.1; 
}

我剛加入translateZ(1px)進行轉換。

工作JS小提琴

http://jsfiddle.net/2a8y5x3t/

我希望這有助於:)

來源

2014-09-03 04:23:53 YOU

你需要添加transform: rotateY(-180deg);階級.back看到DEMO。

.back { 
transform: rotateY(-180deg);/*change from 180 to -180deg*/ 
width: 200px; 
height: 150px; 
padding:10px; 
background-color:#1d8cc2; 
font-size: 22px; 
color: #fff; 
font-weight: 300; 
line-height: 1.1; 
}

來源

2014-09-03 04:28:21

@ user1319836你可能會接受這裏的答案，所以這個問題將有助於在不久的將來遇到同樣問題的用戶。 – 2014-09-03 04:35:01

只有一個href鏈接的一部分是活動的

回答

工作JS小提琴

相關問題