您可以修改懸停時不相關元素的 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中文網其他相關文章！