您可以修改悬停时不相关元素的 CSS 吗？

您可以在悬停时修改不同类的 CSS 吗？

许多开发人员都会遇到需要在一个元素悬停时修改另一个元素的 CSS 的情况将鼠标悬停在不相关的元素上。单独使用 CSS 在实现这一目标方面常常存在局限性，因此需要探索潜在的解决方案。

CSS 解决方案

值得庆幸的是，CSS 为这项任务提供了两种有效的方法：

1. F 作为 E 的子元素： 如果要修改 CSS 的元素 (F) 是悬停元素 (E) 的子元素，请使用：

   .item:hover .wrapper {
       /* CSS modifications for element F */
   }

   登录后复制

2. F 作为 E 的兄弟姐妹： 如果 F 不是 E 的子代，而是 DOM 中较晚的兄弟姐妹或其后代（出现在 E 之后）标记），使用：

   .item:hover ~ .wrapper {
       /* CSS modifications for element F */
   }

   登录后复制

JavaScript 替代方案

虽然 JavaScript 通常不鼓励执行此类简单任务，但它提供了一个替代方法：

document.getElementsByClassName('item')[0].onmouseover = () => {
    document.getElementsByClassName('wrapper')[0].style.backgroundColor = "url('some url')";
};

以上是您可以修改悬停时不相关元素的 CSS 吗？的详细内容。更多信息请关注PHP中文网其他相关文章！