Question

简短问题：为什么我悬停时background-color的{{1}}不会改变？ .b？

CSS

.a

HTML

.a {
    color: red;
}

.b {
    color: orange;
}

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

http://jsfiddle.net/2NEgt/

Answer 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即将到来的所有兄弟姐妹在它之后，而不仅仅是下一个。

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

Answer 2

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

Answer 3

您可以使用+选择器

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

将css应用于兄弟元素，或

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

用于嵌套类。

Answer 4

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

Answer 5

你可以做两件事。

更改HTML以使.b成为.a

的孩子

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

OR

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

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

Answer 6

不需要js http://jsfiddle.net/2NEgt/3/

Answer 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";
};

Answer 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将变为黑色

Answer 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>

CSS：悬停在其他元素上？

9 个答案: