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

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

Answer 2

问题是，您正在检查同级锚标记的悬停状态以设置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>

CSS：悬停闪烁

2 个答案: