CSS：悬停在其他元素上？

简短问题：为什么当我悬停时，background-color的.b不会改变？ .a？CSS：悬停在其他元素上？

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/

来源

2012-07-16 Sven

为了您的CSS代码正常工作，第二个div应该嵌入到第一个div中。 – rhino 2012-07-16 15:30:40

'.b'必须是'.a'的子才能使用 – Jrod 2012-07-16 15:31:47

你需要有.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/

来源

2012-07-16 15:33:19 Ana

因为.B不是.A的孩子，让选择器没有找到任何东西。使用JavaScript来做你想做的事情。

来源

2012-07-16 15:30:33 Tallboy

当一个事件发生在另一个元素上时，你不应该改变兄弟的风格。它超出了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"; 
};

来源

2012-07-16 15:30:48

实际上，您可以使用兄弟选择器'.a：hover + .b'或'.a：hover〜.b' – Ana 2012-07-16 15:32:07

i不知道为什么这已被upvoted作为@Ana所说的是真的 – 2012-07-16 15:33:29

@Ana：正确，我的答案已被纠正。 – 2012-07-16 15:35:20

难道你们就不能这样做a:hover + b？看到http://meyerweb.com/eric/articles/webrev/200007a.html

来源

2012-07-16 15:33:05 Josh

您可以使用+选择

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

应用CSS的同级元素，或

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

嵌套类。

来源

2012-07-16 15:34:02 Stano

你可以做两件事。

要么改变你的HTML，使.b的.a

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

改变你的CSS孩子使用相邻选择

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

来源

2012-07-16 15:34:17 Jrod

没有JS需要http://jsfiddle.net/2NEgt/3/

来源

2012-07-16 15:34:32

试着理解这一点例如：
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将得到黑色

来源

2014-06-14 14:55:42 zdifahk

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>

来源

2014-09-03 23:25:28

CSS：悬停在其他元素上？

回答

相关问题