html - 只有部分 href 链接处于事件状态

Question

我正在构建一个 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/

Answer 1

将此添加到您的 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

http://jsfiddle.net/2a8y5x3t/

希望对您有所帮助:)