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

为此，我将依赖于使用自定义属性(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。

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

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

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

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

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

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

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

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

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

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

here

#imageDiv是第一个要悬停的div

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

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

对我有用

非常感谢Mike和Robertc的帮助帖子!

如果你的HTML中有两个元素，你想:将鼠标悬停在一个元素上，并在另一个元素上进行样式更改，这两个元素必须直接相关——父元素、子元素或兄弟元素。这意味着这两个元素要么必须是一个在另一个里面，要么必须都包含在同一个更大的元素中。

当我的用户阅读我的网站时，我想在浏览器右侧的一个框中显示定义:鼠标悬停在突出显示的术语上;因此，我不希望'definition'元素显示在'text'元素中。

我几乎放弃了，只是添加javascript到我的页面，但这是未来dang它!我们不应该忍受CSS和HTML告诉我们在哪里放置元素才能达到我们想要的效果!最后我们妥协了。

虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能有效:悬停目标之间的相互悬停，但css position属性可以用于显示任何您想要的元素。我使用position:fixed将:hover动作的目标放置在用户屏幕上我想要的位置，而不管它在HTML文档中的位置。

html:

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

css:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}
    
.def {
  display: none;
}
    
#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

在这个例子中，来自#explainBox中的元素的:hover命令的目标必须是#explainBox或#explainBox。分配给#definitions的位置属性强制它出现在所需的位置(在#explainBox之外)，即使它在技术上位于HTML文档中不需要的位置。

我理解使用相同的#id用于多个HTML元素被认为是糟糕的形式;然而，在这种情况下，#light的实例可以独立描述，因为它们各自位于唯一#id的元素中。在这种情况下，是否有理由不重复使用id #灯?