html - 将鼠标悬停在文本链接上时不透明度会闪烁

Question

我看到这是一个常见问题，但我从以前的 SO 答案中借用的解决方案似乎不起作用。我的网站上有一系列图片，当有人将鼠标悬停在它们上面时，他们会在图片上显示文本(包括链接)，同时降低图片的不透明度。问题是，当有人将鼠标悬停在图像上时，图像上的悬停会失去焦点并且不透明度开始闪烁。我已尝试按照此处的建议将图像和相关文本封装在一个 div 中:Hover-Effect disappears, when hovering over Text .但这对我不起作用。

.hover_img:hover img {
    opacity: .2;
}

.portfolio_img:hover + .center_text {
    display: block;
}

.center_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    font-weight: bold;
}

<div class="container">
	<div class="row">
		<div class="col-md-4">
			<div class="hover_img">
				<img class="portfolio_img" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Image">
				<div class="center_text">Click here for info <a href="https://stackoverflow.com" target="_blank">Stackoverflow</a></div>
            </div>
	    </div>
    </div>
</div>

Answer 1

发生这种情况是因为 .portfolio_img:hover 在您将鼠标悬停在文本上时会感到困惑。修复它的简单方法是将其更改为 .hover_img:hover

.hover_img:hover img {
    opacity: .2;
}

.hover_img:hover .center_text {
    display: block;
}

.center_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    font-weight: bold;
}

<div class="container">
	<div class="row">
		<div class="col-md-4">
			<div class="hover_img">
				<img class="portfolio_img" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Image">
				<div class="center_text">Click here for info <a href="https://stackoverflow.com" target="_blank">Stackoverflow</a></div>
            </div>
	    </div>
    </div>
</div>