使用CSS更改hover上的兄弟元素的颜色
以下是我的HTML
<h1>Heading</h1> <a class="button" href="#"></a> 我想要做的是当我hover<a>标签时，我想纯粹使用CSS来改变<h1>标签的颜色。 我怎样才能做到这一点？
PS —– *编辑* ———-
如果我用一个id包裹在div周围呢？
<div id="banner"> <h1>Heading</h1> <a class="button" href="#"></a> </div>
这会有帮助吗？
没有CSSselect器可以做到这一点（ 在CSS3中，甚至 ）。 元素，在CSS中，从来不知道他们的父母，所以你不能做a:parent h1 （例如）。 也不知道他们的兄弟姐妹（大多数情况下），所以你不能做#container a:hover { /* do something with sibling h1 */ } 。 基本上，CSS属性不能修改元素和子元素（他们不能访问父母或兄弟）。
你可以在 a包含h1 ，但是这也会让你的h1变好。
你将只能使用JavaScript（ jsFiddle proof-of-concept ）来实现这个function。 这看起来像这样：
$("a.button").hover(function() { $(this).siblings("h1").addClass("your_color_class"); }, function() { $(this).siblings("h1").removeClass("your_color_class"); });
当元素被徘徊时，你可以创build一个跟随元素变化的兄弟，例如，当h1被徘徊时，你可以改变链接的颜色，但是不能以同样的方式影响前一个兄弟。
h1 { color: #4fa04f; } h1 + a { color: #a04f4f; } h1:hover + a { color: #4f4fd0; } a:hover + h1 { background-color: #444; }
<h1>Heading</h1> <a class="button" href="#">The "Button"</a> <h1>Another Heading</h1>
HTML：
<div id="banner"> <h1>Heading</h1> <a class="button" href="#">link</a> </div>
CSS：
#banner:hover h1 { color: red; } #banner h1:hover { color: black; } a { position: absolute; }
小提琴： http : //jsfiddle.net/joplomacedo/77mqZ/
a元素是绝对定位的。 可能对你现有的结构不完美。 让我知道，我可能会find一个解决方法。
将H1标签改成一个链接，样式与普通文本一样吗？ 然后用这个，
a:link {color:#FF0000;} a:hover {color:#FF00FF;}
它应该工作，当你hover:)你也可以通过将它包含在一个div中，然后将其定位如下：
.exampledivname a:link {color:#FF0000;} .exampledivname a:hover {color:#FF00FF;}
这应该有所帮助。
http://plnkr.co/edit/j5kGIav1E1VMf87t9zjK?p=preview
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <style> ul:hover > li { opacity: 0.5; } ul:hover li:hover { opacity: 1; } </style> </head> <body> <h1>Hello Plunker!</h1> <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> </body> </html>
这里是一个例子，如何可以在纯CSS做，希望它可以帮助别人
