只有部分 href 链接处于活动状态

Posted 2023-03-05

【中文标题】只有部分 href 链接处于活动状态

【英文标题】：only part of a href link is active

【发布时间】：2014-10-27 11:13:00

【问题描述】：

我正在构建一个带有旋转拇指的 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/

【问题讨论】：

我可以点击链接文本中的任何位置..

@Rex 我在 Chrome 中遇到了同样的问题（半链接停用）

链接似乎只适用于 Chrome 中的“re”

webkit transform blocking link的可能重复

除了重复的问题，也请阅读this

【参考方案1】：

如果您希望整个 div 可点击，请使用 onclick="location.href='index.html';"，更新后的代码可在 http://jsfiddle.net/brm3z2dk/7/ 获得

【参考方案2】：

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

我希望这会有所帮助:)

【参考方案3】：

您需要在.back 类上添加transform: rotateY(-180deg);，请参阅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;

【讨论】：

@user1319836 你可以在这里接受答案，所以这个问题将在不久的将来对遇到同样问题的用户有所帮助。