logo标签列表

CSS :hover在其他元素上怎么实现？

csshover
10

简短问题：当我悬停在 .a 上时，为什么 .b 的 background-color 没有改变？

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/

4
为了使您的 CSS 代码生效，第二个 div 必须嵌套在第一个 div 中。 - rhino
3
要使这个工作生效，.b 必须是 .a 的子元素。 - Jared
9个回答
45

您需要使用.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/
6
6
您可以使用+选择器。
.a:hover + .b {
    background-color: blue;
}

要应用CSS于兄弟元素，或者

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

嵌套类的使用。

3

因为.b不是.a的子元素，所以该选择器无法找到任何内容。请使用JavaScript来完成你想要做的事情。

2

你可以做两件事情。

要么改变你的HTML，使.b成为.a的子元素。

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

或者

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

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

当不同元素上发生事件时，您不应更改兄弟元素的样式。这超出了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";
};
6
实际上，你可以使用兄弟选择器.a:hover + .b或.a:hover ~ .b实现。 - Ana
我不知道为什么这个被点赞了，因为@Ana所说的是真的。 - Nicholas King
0
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>
0
尝试理解这个例子：
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将变为黑色。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接