悬停在文字上时，悬停效果消失 [英] Hover-Effect disappears, when hovering over Text
本文介绍了悬停在文字上时，悬停效果消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个主题是这样说的 - 我的问题如下：
- 当我将鼠标悬停在图片上时， / 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 imgso that when you hover over anything in an.image_box_one, it will apply styles to theimg@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>这篇关于悬停在文字上时，悬停效果消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
