텍스트 링크 위로 마우스를 가져 가면 불투명도가 깜박임

Question

이것이 일반적인 문제인 것을 알았지 만 이전의 SO 답변에서 빌린 해결책은 효과가없는 것처럼 보입니다. 나는 내 웹 사이트에 일련의 이미지를 가지고 있는데, 누군가 그 위에 있으면 이미지의 불투명도를 줄이면서 이미지 위에 텍스트 (링크 포함)를 표시합니다. 문제는 누군가 이미지 위로 마우스를 올리면 이미지 위로 마우스를 올리면 초점이 사라지고 불투명도가 깜박이기 시작한다는 것입니다. 나는 여기에 제안 된 바와 같이 div에 이미지와 관련 텍스트를 캡슐화하려고 시도했다 : Hover-Effect disappears, when hovering over Text. 그러나 그것은 내 경우에는 효과가 없습니다. 당신은 텍스트 위로 마우스를 가져 가면 가져가 혼란을 가져옵니다 .portfolio_img이 때문에

.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

그것은 발생합니다. 당신은 텍스트 위에 마우스를 올려 때 깜박 의미

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