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

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

here

#imageDiv是第一个要悬停的div

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

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

对我有用

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

#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，反之亦然。

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

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

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

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

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

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

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

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

非常感谢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 #灯?