悬停在文本链接上时不透明闪烁
问题描述：
我看到这是一个常见问题，但我从以前的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">
\t <div class="row">
\t \t <div class="col-md-4">
\t \t \t <div class="hover_img">
\t \t \t \t <img class="portfolio_img" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Image">
\t \t \t \t <div class="center_text">Click here for info <a href="https://stackoverflow.com" target="_blank">Stackoverflow</a></div>
</div>
\t </div>
</div>
</div>
答
这是因为.portfolio_img：当你将鼠标悬停在文本悬停变得混乱。修复它简单的方法是将其更改为.hover_img：悬停
.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">
\t <div class="row">
\t \t <div class="col-md-4">
\t \t \t <div class="hover_img">
\t \t \t \t <img class="portfolio_img" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Image">
\t \t \t \t <div class="center_text">Click here for info <a href="https://stackoverflow.com" target="_blank">Stackoverflow</a></div>
</div>
\t </div>
</div>
</div>
你的意思是，当你将鼠标悬停在文本它闪烁？ '.hover_img：悬停.portfolio_img + .center_text' – Huangism