悬停在文本上时，悬停效果消失

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>