我正在使用带有图像叠加层的 Bootstrap Card 组件，我希望在鼠标悬停时该图像叠加层出现在图像上。在尝试了此处类似问题的解决方案并尝试了文档中的所有内容后，当光标位于图像上方时，我无法使覆盖层不闪烁。任何建议都会非常感谢。我尝试过使用显示或不透明度而不是可见性，并且使用 :hover 选择包含的 div 也没有什么区别。.hidden-overlay { background-color: #222831; opacity: 80%; visibility: hidden;}.card-title { color: #00adb5; font-style: italic; font-weight: bold;}a:hover + .hidden-overlay { visibility: visible;}<div class="card bg-dark text-white"> <a href="https://codesandbox.io/README.md"> <img class="card-img img-fluid" src="images\Keeper.png" alt="Keeper image" /> </a> <div class="card-img-overlay hidden-overlay"> <h5 class="card-title">Keeper</h5> <p class="card-text">React, Hooks, Material UI, ES6</p> </div></div>再次强调，任何想法都将受到欢迎。谢谢。
2 回答
慕容森
TA贡献1853条经验 获得超18个赞
问题是，您正在检查同级锚标记的悬停状态以设置hidden-overlay. 因此，当覆盖层变得可见并位于锚点元素顶部时，锚点会松开悬停并出现 flickr。
只需将悬停伪类添加到父级即可。
<div class="card bg-dark text-white wrapper">
并将您的规则更新为
.wrapper:hover > .hidden-overlay {
visibility: visible;
}
.hidden-overlay {
background-color: #222831;
opacity: 80%;
visibility: hidden;
}
.card-title {
color: #00adb5;
font-style: italic;
font-weight: bold;
}
.wrapper:hover > .hidden-overlay {
visibility: visible;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white wrapper">
<a href="https://codesandbox.io/README.md">
<img
class="card-img img-fluid"
src="http://placekitten.com/g/200/300"
alt="Keeper image"
/>
</a>
<div class="card-img-overlay hidden-overlay">
<h5 class="card-title">Keeper</h5>
<p class="card-text">React, Hooks, Material UI, ES6</p>
</div>
</div>
蓝山帝景
TA贡献1843条经验 获得超7个赞
您可以尝试使用 JS 事件来检测而不是 CSS 选择器。闪烁可能表明要公开的元素部分覆盖了正在侦听悬停事件的元素。也许 JS 事件可以更稳健地处理这种情况 -onMouseEnter等等。
- 2 回答
- 0 关注
- 58 浏览
添加回答
举报
0/150
提交
取消