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

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

here

#imageDiv是第一个要悬停的div

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

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

对我有用

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

#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变量)。我们可以从说明书中读到:

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

这个想法是在主元素中定义自定义属性，并使用它们来设置子元素的样式，因为这些属性是继承的，我们只需要在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声明来改变不同元素的许多属性。

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

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

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

除了在其他答案中已经提供的通用选择器之外，现在可以在没有父/子或兄弟姐妹关系的情况下依赖: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，反之亦然。