当元素 a 悬停时，如何为元素 b 开始过渡？

Question

我有两个元素。当我将鼠标悬停在其中一个（img）上时，我希望它 在页面上的不同元素上开始过渡 。我 99.999% 肯定我以前做过这个，但我不记得是怎么做的，再多的搜索也没有给我任何提示。

当元素 a 悬停时，如何开始元素 b 的过渡？

Answer 1

如果第二个元素是第一个元素的兄弟元素，您可以在 CSS 中这样做。

以下面的标记为例：

<img src="…" class="hover-trigger">
<section class="hover-target">

和这个 CSS:

.hover-target {
    opacity: 0;
    transition: opacity 200ms linear;
}

.hover-trigger:hover + .hover-target {
    opacity: 1;
}

当您将鼠标悬停在 img.hover-trigger 上时，将触发 .hover-target 上的过渡。

Answer 2

您可以使用 + 兄弟 select 或者。

目标元素a为:hover伪class和select兄弟元素b。在目标元素 b 上使用 transition 属性。

.a:hover + .b {
  background: #8AACFF;
}
.b {
  background: lightblue;
  transition: all ease 1s;
}

<div class="a">Hover over me</div>
<div class="b">My background will change</div>

How can I start a transition for element b when element a is hovered?