:hover 可以修改外部 CSS 类吗？

:hover 可以修改外部 CSS 类吗？

在 CSS 中，我们可以使用 :hover 选择器将样式更改应用于悬停时的元素。但是，如果我们想在悬停另一个元素时修改不同类中元素的 CSS，该怎么办？

由于 CSS 选择器仅根据 DOM 中的层次结构或关系来定位元素，因此不可能直接修改当前悬停元素范围之外的元素的 CSS。

间接选项修改

但是，有一些间接的方法可以达到类似的效果：

• 亲子关系：如果你要修改的元素（E ) 是悬停元素 (F) 的子元素，您可以使用 F 上的 :hover 选择器来定位E.

.item:hover .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' is hovered */
}

• 兄弟姐妹关系：如果 E 是 F 的兄弟姐妹（或 F 兄弟姐妹之一的后代），则可以使用 ~ 兄弟姐妹CSS 中的组合器。

.item:hover ~ .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}

JavaScript解决方案

如果 CSS 方案不可行，可以使用 JavaScript 根据 F 的悬停状态来操作 E 的 CSS 属性。

<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
  document.querySelector('.wrapper').style.backgroundColor = 'red';
});

document.querySelector('.item').addEventListener('mouseleave', () => {
  document.querySelector('.wrapper').style.backgroundColor = '';
});</code>

结论

虽然 CSS 选择器本身无法直接修改外部类，但父子或兄弟关系以及 JavaScript 提供了间接的解决方案来实现类似的效果效果。

以上是:hover 可以修改外部 CSS 类吗？的详细内容。更多信息请关注PHP中文网其他相关文章！