Question

我知道，当对象是彼此的兄弟姐妹或一个孩子时，可以这样做。但是如果不是这种情况，怎么能达到这种效果呢？

由于无法通过父级或同级方法完成此操作（至少据我所知），所以我转向了互联网，但找不到任何明智的解决方案。

<div class="x">
  <div class="y">
    <div class="z">
      <p class="hover-me"></p>
    </div>
  </div>
</div>
<div class="the-hover-should-effect-me"></div>

我希望代码停留在.hover-me的上方，使我更改.the-hover-should-effect-me，因为它们不是我要做的兄弟姐妹或孩子。

Answer 1

使用普通CSS无法完成此操作，因此您需要使用JavaScript：

let hoverMe = document.querySelector('.hover-me');
hoverMe.addEventListener('mouseenter', () => {
    // apply changes to .the-hover-should-effect-me
});
hoverMe.addEventListener('mouseout', () =>  {
    // revert changes to .the-hover-should-effect-me
});

如果您有.hover-me和.the-hover-should-effect-me的多个配对，则可以基于每个配对具有的公共容器执行查询。

Answer 2

目前还没有一种解决方案，它允许父A的子元素通过纯CSS解决方案影响父B。

这可以通过使用javsacript来实现。

const hover = document.querySelector(".hover-me");
const hover_target = document.querySelector(".the-hover-should-effect-me");

hover.addEventListener('mouseover', () => {
    hover_target.textContent ="hi";
})

悬停另一个元素时如何设置样式？

2 个答案: