CSS 可以在將滑鼠懸停在另一個類別上時修改一個類別的樣式嗎？

使用CSS 修改懸停時的類別樣式

是否可以使用單一CSS 規則來更改一個類別在懸停時的CSS 屬性來自單獨類別的元素？是否可以建立以下規則：

.item:hover .wrapper { /*some css*/ }

其中 .wrapper 不直接包含在 .item 中，而是位於文件的其他位置？

CSS 解

是的，可以使用 CSS 選擇器。使用:hover 修改另一個元素的樣式時，可以採取兩種方法：

1.後代或子元素

如果.wrapper 是.item 的子元素，則可使用此選擇器：

.item:hover .wrapper {
    /* CSS properties to change */
}

2。同級元素

如果.wrapper是.item的同級元素，在DOM中出現在.item之後，你可以使用這個選擇器：

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

JavaScript解決方案

雖然這個簡單的任務不需要JavaScript，但您可以使用它來實現所需的效果。這是一個範例：

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

其他資訊

請務必注意，您的範例選單元素似乎使用不同的類別。將滑鼠停留在某個元素上時，其子選單會在右側顯示為覆蓋層。控制子選單背景的類別被命名為“wrapper”。要達到所需的效果，請使用上述同級選擇器方法。

參考文獻

• [CSS 2.1 選擇器](https://www.w3.org /TR/CSS21/selectors.html)

以上是CSS 可以在將滑鼠懸停在另一個類別上時修改一個類別的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！