Question

当我试图让一个元素悬停在另一个元素上时，悬停效果不起作用，如下所示：

<html>
<head>
<title>111</title>
<style type="text/css">
#aa {height: 500px; width:500px; background-color: blue; float: left;}
#bb {height: 500px; width:500px; background-color: red; float: left;}
#bb:hover #aa {background-color: green;}
</style>
</head>
<body>
<div id="aa"></div>
<div id="bb"></div>
</body>
</html>`

你能告诉我我做错了什么吗？谢谢！

Answer 1

编辑：萨钦提出了一个非常有效的观点。做了一些测试和阅读以确认并且http://dev.w3.org/csswg/selectors4/#subject表明选择者这样做是严重出血的年龄：D

#bb:hover + #aa { } // Wont work
#aa:hover + #bb { } // Will work but within the scope of OPs question, useless.

最佳解决方案是利用JS和mouseover进行更改。

Answer 2

实际上没有先前的兄弟选择器。所以只有这样才能运作

#aa:hover + #bb   {background-color: green;}

但不要担心你可以使用JS或jQuery来解决这个问题。这是一个使用jQuery的简单解决方案就是这个

$('#bb').hover(function(){
    $(this).prev('#aa').css("background-color","green");
},function(){
    $(this).prev('#aa').css("background-color","blue");
});

查看包含css兄弟选择器的演示以及用于选择以前兄弟姐妹的jquery解决方案。

Js Fiddle Demo

Answer 3

由于我之前的回答是错误的并且没有真正回答你的问题，我已经更新了我的回复。我认为最好的解决方案是在类似于萨钦建议的JS中。然而，仅仅是在CSS3中有一个General Sibling Selector。

在你的情况下使用它时，我们将能够在div #a上悬停时改变div #bb的颜色（不完全如你的例子），我也同意其他人对于以前的选择器JS将是方式。

#aa:hover ~ #bb {
   color:red;
}

希望这有帮助。

悬停效果不起作用

3 个答案: