CSS：悬停在其他元素上？答案

【问题标题】：CSS :hover on other element?CSS：悬停在其他元素上？
【发布时间】：2012-07-15 11:42:41
【问题描述】：

小问题：为什么我悬停时.b 的background-color 没有变化？ .a?

CSS

.a {
    color: red;
}

.b {
    color: orange;
}

.a:hover .b {
    background-color: blue;
}

HTML

<div id="wrap">
    <div class="a">AAAA</div>
    <div class ="b">BBBB</div>
</div>

http://jsfiddle.net/2NEgt/

【问题讨论】：

为了让您的 CSS 代码正常工作，第二个 div 应该嵌入到第一个中。
.b 必须是 .a 的孩子才能工作

标签： css hover

【解决方案1】：

您需要使用.a:hover + .b 而不是.a:hover .b

.a:hover .b 适用于类似的结构

<div class="a">AAAA
  <div class ="b">BBBB</div>
</div>

如果在某些时候您需要在 .a 和 .b 之间添加一些元素，那么您需要使用 .a:hover ~ .b，它适用于 .a 的所有兄弟姐妹在它之后 em>，不只是下一个。

演示http://jsfiddle.net/thebabydino/EajKf/

【讨论】：

【解决方案2】：

你不能不做a:hover + b之类的事情吗？见http://meyerweb.com/eric/articles/webrev/200007a.html

【讨论】：

【解决方案3】：

你可以使用+选择器

.a:hover + .b {
    background-color: blue;
}

为兄弟元素应用css，或

.a:hover > .b {
    background-color: blue;
}

用于嵌套类。

【讨论】：

【解决方案4】：

因为 .b 不是 .a 的子级，所以选择器没有找到任何东西。使用 javascript 做你想做的事。

【讨论】：

【解决方案5】：

你可以做两件事。

更改您的 HTML 以使 .b 成为 .a 的子级

<div id="wrap">
    <div class="a">AAAA
       <div class ="b">BBBB</div>        
    </div>
</div>

或

更改你的 CSS 以使用相邻的选择器

.a:hover + .b {
    background-color: blue;
}

【讨论】：

【解决方案6】：

无需 js http://jsfiddle.net/2NEgt/3/

【讨论】：

【解决方案7】：

当事件发生在不同的元素上时，您不应该更改兄弟的样式。它超出了 CSS 的范围。

使用 JavaScript 来实现，例如：

var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
    bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
    bDiv.style.backgroundColor = "white";
};

【讨论】：

其实可以，使用兄弟选择器.a:hover + .b或.a:hover ~ .b
我不知道为什么这被赞成，因为@Ana 说的是真的

【解决方案8】：

试着理解这个例子：
html代码

<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>

<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}

当您将鼠标悬停在框 1 上时，框 3 将变为黑色

【讨论】：

【解决方案9】：

Jquery 是一个很好且简单的解决方案：

html：

<div class="a">AAA</div>
<div class="b">BBB</div>

脚本： 如果需要，可以将此脚本放入您的 html 中。就是这样。

<script>
      $(".a").mouseover(function(){
        $(".b").css("color", "blue"); 
      });
      $(".a").mouseleave(function(){
        $(".b").css("color", "red");
      });
</script>

【讨论】：