テキストリンク上でマウスを動かすと不透明度がちらつく

Question

これはよくある問題ですが、以前の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>

Answer 1

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