我不知道这是否可行。我现在正在使用CSS3动画，我需要将鼠标悬停在将影响页面上的其他div元素(非子)的链接上。我不知道是否有工作。
- <style type="text/css">
- #header {
- background-color:red;
- }
- #header:hover .element {
- background-color:blue;
- }
- .element {
- background-color:green;
- }
- </style>
–
- <header id="header">
- <li><a href="#">Hover</a></li>
- </header>
- <div class="element" >
- <p>hello world </p>
- </div>
解决方法
由于这些是相邻的兄弟姐妹，您可以使用
adjacent sibling selector：。
- #header:hover + .element {
- background-color:blue;
- }
这在大多数现代浏览器*中得到很好的支持。 IE7可以玩车。 IE6及以下版本不支持。
*其他答案之一提到了一般的兄弟选择器，这在Webkit中与动态伪类一起使用时不起作用，如：hover由于this bug.请注意，如果您尝试堆栈相邻的同样的错误会导致Webkit中的问题具有动态伪类的兄弟选择器。例如#this：hover兄弟兄弟姐妹在Webkit中不起作用。
