悬停效果消失

悬停效果消失

关注
发信
关注(28)粉丝(399)

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

本文介绍了悬停在文字上时，悬停效果消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个主题是这样说的 - 我的问题如下：




  • 当我将鼠标悬停在图片上时， / li>
  • 在悬停前后，图像上的文字应该可见而不会发生任何变化。问题：当我将鼠标悬停在文本上时，颜色悬停叠加消失当我在Div中移动而没有将它移动到文本上时，它只是可见的）

  • 我尝试了一些其他解决方案，比如伪类，但是我没有使它工作......谢谢


    @import url （ 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'）; .text_z {color：white; font-size：20px;位置：绝对;顶部：50％;剩下：50％;变换：翻译（-50％，-50％）; -ms-transform：translate（-50％，-50％）; z-index：999; } .image_box_one img {width：100％;显示：块;身高：自动; } .image_box_one {background：rgba（29，106，154，0.72）;填充：0像素;保证金：0像素; } .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>将鼠标悬停在我身上< br>覆盖消失< / div> < / DIV> < / DIV> < div class =col-lg-4> < div class =image_box_one> < img src =http://placehold.it/1332x1017/> < div class =text_z>将鼠标悬停在我身上< br>覆盖消失< / div> < / DIV> < / DIV> < div class =col-lg-4> < div class =image_box_one> < img src =http://placehold.it/1332x1017/> < div class =text_z>将鼠标悬停在我身上< br>覆盖消失< / div> < / DIV> < / DIV> < / DIV> < / div>

    解决方案

    <当您将鼠标悬停在文本上时，您不再徘徊 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;位置：绝对;顶部：50％;剩下：50％;变换：翻译（-50％，-50％）; -ms-transform：translate（-50％，-50％）; z-index：999; } .image_box_one img {width：100％;显示：块;身高：自动; } .image_box_one {background：rgba（29，106，154，0.72）;填充：0像素;保证金：0像素; } .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>将鼠标悬停在我身上< br>覆盖消失< / div> < / DIV> < / DIV> < div class =col-lg-4> < div class =image_box_one> < img src =http://placehold.it/1332x1017/> < div class =text_z>将鼠标悬停在我身上< br>覆盖消失< / div> < / DIV> < / DIV> < div class =col-lg-4> < div class =image_box_one> < img src =http://placehold.it/1332x1017/> < div class =text_z>将鼠标悬停在我身上< br>覆盖消失< / div> < / DIV> < / DIV> < / DIV> < / div>


    the topic is saying it - my problem is following:

    • I want to have a color overlay when I hover over my picture
    • the text on image should be visible before and after hovering without any changes
    • Issue: when I hover over the text, the color hover overlay disappears (it's just visible when I move around in the Div without moving it over the text)
    • I tried some other solutions, like pseudo classes, but I didn't make it work...thank ya'll!

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

    解决方案

    When you hover over the text, you're no longer hovering the img. Change your selector to .image_box_one:hover img so that when you hover over anything in an .image_box_one, it will apply styles to the 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>

    这篇关于悬停在文字上时，悬停效果消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 02:35
Powered by LMLPHP ©2024 悬停效果消失 0.033699