使用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 可以在將滑鼠懸停在另一個類別上時修改一個類別的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
