CSS：悬停闪烁

Question

我正在使用带有图像叠加层的 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>

再次强调，任何想法都将受到欢迎。谢谢。

Answer 1

问题是，您正在检查同级锚标记的悬停状态以设置hidden-overlay. 因此，当覆盖层变得可见并位于锚点元素顶部时，锚点会松开悬停并出现 flickr。只需将悬停伪类添加到父级即可。<div class="card bg-dark text-white wrapper">并将您的规则更新为.wrapper:hover > .hidden-overlay {&nbsp; visibility: visible;}.hidden-overlay {&nbsp; background-color: #222831;&nbsp; opacity: 80%;&nbsp; visibility: hidden;}.card-title {&nbsp; color: #00adb5;&nbsp; font-style: italic;&nbsp; font-weight: bold;}.wrapper:hover > .hidden-overlay {&nbsp; 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">&nbsp; &nbsp;<a href="https://codesandbox.io/README.md">&nbsp; &nbsp; &nbsp;<img&nbsp; &nbsp; &nbsp; &nbsp; class="card-img img-fluid"&nbsp; &nbsp; &nbsp; &nbsp; src="http://placekitten.com/g/200/300"&nbsp; &nbsp; &nbsp; &nbsp; alt="Keeper image"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="card-img-overlay hidden-overlay">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">Keeper</h5>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">React, Hooks, Material UI, ES6</p>&nbsp; &nbsp; </div></div>

Answer 2

您可以尝试使用 JS 事件来检测而不是 CSS 选择器。闪烁可能表明要公开的元素部分覆盖了正在侦听悬停事件的元素。也许 JS 事件可以更稳健地处理这种情况 -onMouseEnter等等。