我想做的是,当某个div被悬停时,它会影响另一个div的属性。

例如,在这个JSFiddle演示中,当你悬停在#cube上时,它会改变背景色,但我想要的是,当我悬停在#container上时,# cube#会受到影响。

div { 轮廓:1px实心红色; } #{容器 宽度:200 px; 高度:30 px; } #立方体{ 宽度:30 px; 高度:100%; 背景颜色:红色; } #立方体:{徘徊 宽度:30 px; 高度:100%; 背景颜色:蓝色; } < div id = "容器" > < div id = "立方”> < / div > < / div >


当前回答

警告:如果你能使用CSS:使用CSS没有Javascript!

如果你想选择一个位置未知或无法到达的元素,你可以使用JavaScript。

const cube = document.getElementById('cube') const container = document.getElementById('container') 多维数据集。addEventListener('mouseover', () => container.style.backgroundColor = "blue") 多维数据集。addEventListener('mouseleave', () => container.style.backgroundColor = "white") div { 轮廓:1px实心红色; 宽度:200 px; 高度:30 px; } #立方体{ 背景颜色:红色; } <大> < div id = "容器" > < / div > < /主要> < div id = "立方”> < / div >

其他回答

警告:如果你能使用CSS:使用CSS没有Javascript!

如果你想选择一个位置未知或无法到达的元素,你可以使用JavaScript。

const cube = document.getElementById('cube') const container = document.getElementById('container') 多维数据集。addEventListener('mouseover', () => container.style.backgroundColor = "blue") 多维数据集。addEventListener('mouseleave', () => container.style.backgroundColor = "white") div { 轮廓:1px实心红色; 宽度:200 px; 高度:30 px; } #立方体{ 背景颜色:红色; } <大> < div id = "容器" > < / div > < /主要> < div id = "立方”> < / div >

在这个例子中,你可以使用:

#container:hover #cube {
    background-color: yellow;   
}

这个例子只适用于立方体是容器的子容器。对于更复杂的场景,需要使用不同的CSS或JavaScript。

如果立方体直接在容器内:

#container:hover > #cube { background-color: yellow; }

如果立方体在容器关闭标签后面,则容器:

#container:hover + #cube { background-color: yellow; }

如果立方体在容器内的某个地方:

#container:hover #cube { background-color: yellow; }

如果立方体是容器的兄弟:

#container:hover ~ #cube { background-color: yellow; }

只有这个对我有用:

#container:hover .cube { background-color: yellow; }

其中.cube是#容器中的CssClass。

在Firefox, Chrome和Edge中测试。

除了在其他答案中已经提供的通用选择器之外,现在可以在没有父/子或兄弟姐妹关系的情况下依赖:has()。

这里有一个例子:

.box { 宽度:200 px; 比例:1; 显示:inline-block; 边框:1px纯红色; } .box > div { 保证金:5 px; 高度:100%; 边框:2px纯绿色; 光标:指针; } /*当div1悬停时,使div2蓝色*/ Body:has(#div1:hover) #div2 { 背景:蓝色; } /*当div2悬停时,使div1紫色*/ Body:has(#div2:hover) #div1 { 背景:紫色; } < div class = "盒子" > < div id = " div1 " > < / div > < / div > < div class = "盒子" > < div id = " div2 " > < / div > < / div >

如你所见,我们可以通过悬停div2来影响div1,反之亦然。