主页 / 问题 / 1606737
Accepted
Qwertiy
Asked:2025-02-12 06:09:22 +0800 CST2025-02-12 06:09:22 +0800 CST

当鼠标移动到相邻元素时不隐藏元素

  • 772

当您将鼠标悬停在元素 B 上时，元素 C 会出现。当鼠标不在 B 或 C 上时，它会消失。如何让 C 在鼠标位于 A 上时继续显示，但如果鼠标仅在 A 上，而之前未在 B 上，则 C 本身不会出现？

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>

css

1 个回答

  1. Best Answer

    我使用动画想出了这个解决方案：我们在所有三个元素的容器悬停时制作动画，但我们暂停它，当你将鼠标悬停在 B 上时，我们启动动画并出现 C。当鼠标移到这三个元素之外时，hover会随着动画一起消失，元素C也会被隐藏。但是当你再次悬停时，悬停将再次起作用并且动画将是新的，因此一切都将继续起作用。

    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>

    • 5

相关问题