懸停在文本鏈接上時不透明閃爍

我看到這是一個常見問題，但我從以前的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>

來源

2017-10-19 nedrathefr

你的意思是，當你將鼠標懸停在文本它閃爍？ '.hover_img：懸停.portfolio_img + .center_text' – Huangism

這是因爲.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>

來源

2017-10-19 19:48:52 sava

懸停在文本鏈接上時不透明閃爍

回答

相關問題