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便无法实现效果-它必须是同级的parent元素。您可以使用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>

是否可以通过悬停更改其他div元素？

1 个答案: