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

Question

I see this is a common problem, but the solutions I have borrowed from previous SO answers do not seem to work. I have a series of image on my website, and when someone hovers over them, they display text (including a link) over the image, while reducing the opacity of the image. The issue is, when someone hovers over the image, the hover on the image loses focus and the opacity begins to flicker. I've tried encapsulating the image and associated text in a div as suggested here: Hover-Effect disappears, when hovering over Text . But that doesn't work in my case.

 .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

It happens because .portfolio_img:hover gets confused when you hover over the text. Easy way to fix it is to change it to .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>