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

Posted 2023-05-08

【中文标题】悬停在文本上时，悬停效果消失

【英文标题】：Hover-Effect disappears, when hovering over Text

【发布时间】：2017-10-25 11:08:30

【问题描述】：

话题在说——我的问题如下：

当我将鼠标悬停在我的图片上时，我希望有一个颜色叠加层 图片上的文字应该在悬停前后都可见，没有任何变化 问题：当我将鼠标悬停在文本上时，颜色悬停覆盖消失（当我在 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>

【参考方案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>

【讨论】：

这对我帮助很大！:)