Не скрывать элемент при перемещении мыши на соседний

Question

При наведении мыши на элемент B появляется элемент C. При этом исчезает он когда мышь не находится над B или С. Как сделать так, чтобы С продолжал показываться если мышь над A, но не появлялся сам если мышь была наведена только на A и не наводилась до этого на B?

main {
  display: inline-flex;
  position: relative;
  font-size: 3em;
  outline: 1px dotted red;
}

div {
  padding: 1em;
}

.b {
  background: antiquewhite;
}

.c {
  visibility: hidden;
  position: absolute;
  left: 100%;
  background: linear-gradient(to right, silver, gray);
}

.b:hover + .c, .c:hover {
  visibility: visible;
}

<main>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</main>

Answer 1

Придумал такое решение с анимацией: делаем анимацию на hover контейнера всех трёх элементов, но ставим её на паузу, а при наведении мыши на B анимацию запускаем и C появляется. При убирании мыши за пределы трёх элементов hover исчезнет вместе с анимацией, и элемент C скроется. Но при повторном наведении снова сработает hover и анимация будет уже новой, поэтому всё продолжит работать.

main {
  display: inline-flex;
  position: relative;
  font-size: 3em;
  outline: 1px dotted red;
}

div {
  padding: 1em;
}

.b {
  background: antiquewhite;
}

.c {
  visibility: hidden;
  position: absolute;
  left: 100%;
  background: linear-gradient(to right, silver, gray);
}

main:hover .c {
  animation: dont-hide 1ms step-end 1 forwards;
  animation-play-state: paused;
}

.b:hover + .c {
  animation-play-state: running;
}

.b:hover + .c, .c:hover { /* на случай принудительного отключения анимаций */
  visibility: visible;
}

@keyframes dont-hide {
  from { visibility: hidden; }
  to { visibility: visible; }
}

<main>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</main>

БЛОГ НА HUSL

Не скрывать элемент при перемещении мыши на соседний

Ответы (1 шт):