懸停效應消失，懸停在文本

Question

時

的話題是這樣說 - 我的問題如下：

• 我想有一個顏色疊加，當我
• 圖像文本將鼠標懸停在我的照片應該前徘徊不作任何修改
• 發行後可見：當我將鼠標懸停在文字，色彩懸停覆蓋消失
• 我嘗試了一些（當我在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>

Answer 1

當你將鼠標懸停在文本，你不再徘徊在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>