: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 兄弟姐妹之一的后代），则可以使用 ~ 兄弟姐妹组合器

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

JavaScript 解决方案

如果 CSS 解决方案不可行，您可以使用 JavaScript 来操作基于 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中文网其他相关文章！