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 {

  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>

Answer 2

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