: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中文網其他相關文章！