CSS: мерцание при наведении

Question

Я использую Bootstrap компонент карты с наложением изображения, которое я хотел бы видеть поверх изображения при наведении мыши.

После того, как я попробовал решить подобные проблемы здесь и попробовал все в документации, Я не могу получить наложение, чтобы не мерцать, пока курсор находится над изображением. Любые предложения будут отличными, спасибо.

Я попытался использовать display или opacity вместо видимости и выбрать содержащий div с помощью: hover, также ничего не изменилось.

.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.

Просто добавьте псевдокласс hover к родительскому элементу.

<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, et c.