当元素a处于悬停状态时，如何开始元素b的过渡?

Question

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

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

Answer 1

您可以使用+同胞选择器。

为:hover伪类指定元素a，并选择兄弟元素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>

Answer 2

如果第二个元素是第一个元素的兄弟元素，则可以在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上的过渡将被触发