悬停在文本链接上时不透明度闪烁答案

【问题标题】：Opacity flickers when hovering over text link悬停在文本链接上时不透明度闪烁
【发布时间】：2017-10-19 19:42:47
【问题描述】：

我看到这是一个常见问题，但我从以前的 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>

【问题讨论】：

您的意思是当您将鼠标悬停在文本上时它会闪烁？ .hover_img:hover .portfolio_img + .center_text

标签： html css hover

【解决方案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>

【讨论】：