我正在构建一个 HTML、CSS 缩略图网格,带有旋转的拇指,在拇指的背面是一个 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/
最佳答案
将此添加到您的 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 fiddle
希望对您有所帮助:)
关于html - 只有部分 href 链接处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25636073/