Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是因为.portfolio_img：当您将鼠标悬停在文本上时，悬停会变得混乱。修复它的简单方法是将其更改为.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>

将鼠标悬停在文字链接

1 个答案: