当鼠标悬停在某个元素上时，使用兄弟选择器是对其他元素进行样式化的一般解决方案，但它仅在DOM中其他元素跟随该元素时才有效。当其他元素实际上应该在悬停元素之前时，我们该怎么办?假设我们想实现一个信号条评级小部件，如下所示:

这实际上可以使用CSS flexbox模型轻松完成，只需将flex-direction设置为reverse，这样元素就会以与它们在DOM中的顺序相反的顺序显示。上面的截图就是这样一个小部件，用纯CSS实现的。

95%的现代浏览器都支持Flexbox。

.rating { display: flex; flex-direction: row-reverse; width: 9rem; } .rating div { flex: 1; align-self: flex-end; background-color: black; border: 0.1rem solid white; } .rating div:hover { background-color: lightblue; } .rating div[data-rating="1"] { height: 5rem; } .rating div[data-rating="2"] { height: 4rem; } .rating div[data-rating="3"] { height: 3rem; } .rating div[data-rating="4"] { height: 2rem; } .rating div[data-rating="5"] { height: 1rem; } .rating div:hover ~ div { background-color: lightblue; } <div class="rating"> <div data-rating="1"></div> <div data-rating="2"></div> <div data-rating="3"></div> <div data-rating="4"></div> <div data-rating="5"></div> </div>

当鼠标悬停在某个元素上时，使用兄弟选择器是对其他元素进行样式化的一般解决方案，但它仅在DOM中其他元素跟随该元素时才有效。当其他元素实际上应该在悬停元素之前时，我们该怎么办?假设我们想实现一个信号条评级小部件，如下所示:

这实际上可以使用CSS flexbox模型轻松完成，只需将flex-direction设置为reverse，这样元素就会以与它们在DOM中的顺序相反的顺序显示。上面的截图就是这样一个小部件，用纯CSS实现的。

95%的现代浏览器都支持Flexbox。

.rating { display: flex; flex-direction: row-reverse; width: 9rem; } .rating div { flex: 1; align-self: flex-end; background-color: black; border: 0.1rem solid white; } .rating div:hover { background-color: lightblue; } .rating div[data-rating="1"] { height: 5rem; } .rating div[data-rating="2"] { height: 4rem; } .rating div[data-rating="3"] { height: 3rem; } .rating div[data-rating="4"] { height: 2rem; } .rating div[data-rating="5"] { height: 1rem; } .rating div:hover ~ div { background-color: lightblue; } <div class="rating"> <div data-rating="1"></div> <div data-rating="2"></div> <div data-rating="3"></div> <div data-rating="4"></div> <div data-rating="5"></div> </div>

只有这个对我有用:

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

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

在Firefox, Chrome和Edge中测试。

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

#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; }

警告:如果你能使用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 >