当元素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

您可以使用+兄弟选择器。

a伪类的目标元素:hover，并选择兄弟元素b。使用被定位元素transition上的b属性。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;