html - 是否有任何选项可以通过悬停来更改其他 div 元素？

Question

我想通过其他 div 元素的悬停来更改 div 元素的颜色。我已经尝试过这个，但它不起作用。 HTML:

<div class="test1">
    <p></p>
</div>
<div class="test2">
    <a> 
      <span></span>
    </a>
</div>

和CSS:

p:hover ~ a
{
 filter: hue-rotate(110deg);
}
a
{
 color: #03e9f4;
}

当然，它可以像这样使用 HTML...

<div class="test1">
    <p></p>
    <a> 
      <span></span>
    </a>
</div>

但我想把它放在另外两个 div 中，可以吗？

Answer 1

它在最后一个示例中起作用的原因是，悬停元素和目标元素是同一个 div 中的同级元素(并且您正在使用通用同级组合器“~”) - 这是唯一的方法实现的方法是在第一个 div 上设置悬停伪状态，并使用相同的逻辑来定位第二个 div，然后通过后代选择器 ("") 进入第二个 div 到 a 元素。

当您将鼠标悬停在 p 上时，仅靠 CSS 无法实现这种效果 - 它必须是同级元素的父元素。您可以使用 JS 轻松完成此操作 - 但不能仅使用 CSS。

当您将鼠标悬停在 p 的父 div 上时，以下内容将更改 a 元素的颜色。我还添加了一点 :after 伪元素以更好地演示悬停结果。

a {
 color: #03e9f4;
}

.test1:hover ~ .test2 a {
 filter: hue-rotate(110deg);
}

.test1:hover ~ .test2 a:after {
  content: ' and my color changed because you hovered over the previous div'
}

<div class="test1">
    <p>I am in the first div</p>
</div>
<div class="test2">
    <a> 
      <span>I am in the second div</span>
    </a>
</div>