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

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

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

只有这个对我有用:

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

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

在Firefox, Chrome和Edge中测试。

#imageDiv:hover  #detailDiv
{
    z-index: -999 !important;
}

here

#imageDiv是第一个要悬停的div

#detailDiv是css在悬停时应用的第二个div

如果我把鼠标悬停在第一个div上，那么zindex就会赋值给第二个div

对我有用

这是另一个想法，允许你影响其他元素，而不考虑任何特定的选择器，只使用:悬停状态的主元素。

为此，我将依赖于使用自定义属性(CSS变量)。我们可以从说明书中读到:

自定义属性是普通属性，因此可以在 任何元素，都用正常的继承和级联进行解析 规则……

这个想法是在主元素中定义自定义属性，并使用它们来设置子元素的样式，因为这些属性是继承的，我们只需要在hover的主元素中更改它们。

这里有一个例子:

#{容器 宽度:200 px; 高度:30 px; Border: 1px solid var(——c); ——c:红色; ｝ #容器:{徘徊 ——c:蓝色; ｝ #容器> div { 宽度:30 px; 高度:100%; background - color: var (- c); ｝ < div id = "容器" > < div > < / div > < / div >

为什么这可以比使用特定的选择器结合悬停更好?

我可以提供至少2个理由，使这种方法成为一个很好的考虑:

If we have many nested elements that share the same styles, this will avoid us complex selector to target all of them on hover. Using Custom properties, we simply change the value when hovering on the parent element. A custom property can be used to replace a value of any property and also a partial value of it. For example we can define a custom property for a color and we use it within a border, linear-gradient, background-color, box-shadow etc. This will avoid us reseting all these properties on hover.

下面是一个更复杂的例子:

.container { --c:red; width:400px; display:flex; border:1px solid var(--c); justify-content:space-between; padding:5px; background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat; } .box { width:30%; background:var(--c); box-shadow:0px 0px 5px var(--c); position:relative; } .box:before { content:"A"; display:block; width:15px; margin:0 auto; height:100%; color:var(--c); background:#fff; } /*Hover*/ .container:hover { --c:blue; } <div class="container"> <div class="box"></div> <div class="box"></div> </div>

正如我们上面所看到的，我们只需要一个CSS声明来改变不同元素的许多属性。

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

当鼠标悬停在某个元素上时，使用兄弟选择器是对其他元素进行样式化的一般解决方案，但它仅在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>