<a> 带有 href 的标签没有悬停效果 css

Question

我有一个 div 鼠标悬停时有脚蹼效果，在里面，我有一个带有 href 的标签，但是当我悬停它时没有出现悬停效果。
我不知道我的代码有什么问题。
它有一个父元素，它有脚蹼悬停效果，它的子元素实际上是一个 <a> 标签，根本没有悬停效果。
我的意思是 <a> 标签中没有鼠标指针和颜色发生变化。我整天都在玩这段代码，什么都没有！！

#flippers {
 max-width:994px;
 text-align:center;
}

.flip-container {
 position:relative;
 display: inline-block;
 float:right;
 padding:15px;
 margin-left:32px;
}

.flip-container-final {
 position:relative;
 display: inline-block;
 float:right;
 padding:15px;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
 transform: rotateY(180deg);
}

.flip-container:hover {
 background:#CCC;
}

.flip-container, .front, .back {
 width: 280px;
 height: 280px;
}

.flip-container-final:hover .flipper, .flip-container-final.hover .flipper {
 transform: rotateY(180deg);
}

.flip-container-final:hover {
 background:#CCC;
}

.flip-container-final, .front, .back {
 width: 280px;
 height: 280px;
}

.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}

.front, .back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}

.front {
 transform: rotateY(0deg);
}

.back {
 transform: rotateY(180deg);
}

.svn-icon-title {
 margin-top:110px;
}

.svn-icon-title a {
 text-decoration:none;
 color:#000;
}

.svn-icon-title a:hover {
 color:#db1616;
}

    <div id="flippers">
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <img src="image/order.png" />
                </div>
                <div class="back">
                    <img src="image/order-back.png" />
                </div>
            </div>
            <div class="svn-icon-title">
                <a href="phon.php">order</a>
            </div>
            <p>make order</p>
        </div>
        
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <img src="image/check.png" />
                </div>
                <div class="back">
                    <img src="image/check-back.png" />
                </div>
            </div>
            <div class="svn-icon-title">
                <a href="#">check</a>
            </div>
            <p>check order</p>
        </div>
        
        <div class="flip-container-final" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <img src="image/deliver.png" />
                </div>
                <div class="back">
                    <img src="image/deliver-back.png" />
                </div>
            </div>
            <div class="svn-icon-title">
                <a href="#">deliver</a>
            </div>
            <p>deliver order</p>
        </div>
    </div>

Answer 1

问题似乎是因为position: absolute;您将在多个元素上设置 (front/back)。

实际情况是文本实际上位于这些元素的后面，因此当您将鼠标悬停在文本上时，您并不是在文本上悬停，而是在 front/back 元素上悬停。所以浏览器没有拾取悬停。

为了解决这个问题，您可以尝试在您的 snv-icon-title class 上设置 position: absolute，为其设置宽度并确保其 z-index 高于您的 front/back个元素。这应该会使文本向前推进。

<a> 带有 href 的标签没有悬停效果 css

<a> tag with href has no hover effects css

html

css

hover