悬停效应消失，悬停在文本

时

我想有一个颜色叠加，当我
图像文本将鼠标悬停在我的照片应该前徘徊不作任何修改
发行后可见：当我将鼠标悬停在文字，色彩悬停覆盖消失
我尝试了一些（当我在div走动而不移动它在文本上它只是可见的）其他解决方案，如伪类，但我没有使它的工作......谢谢你们！

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
    .text_z{ 
 
      color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
      z-index: 999; 
 
     } 
 
     
 
     
 
     .image_box_one img { 
 
      width: 100%; 
 
      display: block; 
 
      height: auto; 
 

 
     } 
 
     
 
     .image_box_one { 
 
      background: rgba(29, 106, 154, 0.72); 
 
      padding:0px; 
 
      margin:0px; 
 
     } 
 
     
 
      
 
     .image_box_one img:hover { 
 
      opacity: 0.5; 
 
     }

<div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-4"> 
 
       <div class="image_box_one"> 
 
       <img src="http://placehold.it/1332x1017" /> 
 
       <div class="text_z">Hover over Me <br>Overlay Disappears</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <div class="image_box_one"> 
 
       <img src="http://placehold.it/1332x1017" /> 
 
       <div class="text_z">Hover over Me <br>Overlay Disappears</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <div class="image_box_one"> 
 
       <img src="http://placehold.it/1332x1017" /> 
 
       <div class="text_z">Hover over Me <br>Overlay Disappears</div> 
 
       </div> 
 
      </div> 
 
    </div>    
 
    </div>

来源

2017-05-24 PeterPilz

当你将鼠标悬停在文本，你不再徘徊在img。改变你的选择，以.image_box_one:hover img所以，当你将鼠标悬停在任何东西在.image_box_one，它会应用样式到img

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
    .text_z{ 
 
      color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
      z-index: 999; 
 
     } 
 
     
 
     
 
     .image_box_one img { 
 
      width: 100%; 
 
      display: block; 
 
      height: auto; 
 

 
     } 
 
     
 
     .image_box_one { 
 
      background: rgba(29, 106, 154, 0.72); 
 
      padding:0px; 
 
      margin:0px; 
 
     } 
 
     
 
      
 
     .image_box_one:hover img { 
 
      opacity: 0.5; 
 
     }

<div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-4"> 
 
       <div class="image_box_one"> 
 
       <img src="http://placehold.it/1332x1017" /> 
 
       <div class="text_z">Hover over Me <br>Overlay Disappears</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <div class="image_box_one"> 
 
       <img src="http://placehold.it/1332x1017" /> 
 
       <div class="text_z">Hover over Me <br>Overlay Disappears</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <div class="image_box_one"> 
 
       <img src="http://placehold.it/1332x1017" /> 
 
       <div class="text_z">Hover over Me <br>Overlay Disappears</div> 
 
       </div> 
 
      </div> 
 
    </div>    
 
    </div>

来源

2017-05-24 22:50:48

悬停效应消失，悬停在文本

回答

相关问题