Question

I have a div with flipper effect when hover it and inside that, I have a tag with href, but no hover effect occurred when I hover it.
I do not know what is wrong with my code.
It has a parent element that has flipper hover effect and its child element that is actually an <a> tag, has no hover effect at all.
I mean no mouse pointer and change in color occurred in <a> tag. I have been playing around with this code all this day and nothing!!

#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

问题似乎是因为这个位置：绝对;你设置了许多元素（前/后）。

正在发生的事情是文本确实在这些元素背后，因此当您将鼠标悬停在文本上时，您不会将鼠标悬停在文本上，而是将鼠标悬停在前/后元素上。所以浏览器没有拿起悬停。

要解决这个问题，你可以尝试在你的snv-icon-title类上设置position：absolute，给它一个设定的宽度，并确保它的z-index高于你的前/后元素。这应该使文本向前发展。

<a> tag with href has no hover effects css

1 个答案: