Html 使用 CSS 在悬停时更改兄弟元素的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12574668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change color of sibling elements on hover using CSS
提问by nasty
Below is my HTML
下面是我的 HTML
<h1>Heading</h1>
<a class="button" href="#"></a>
What I want to do is, when I hover the <a>tag, I want to change the colour of <h1>tag purely using CSS. How can I achieve this?
我想要做的是，当我悬停<a>标签时，我想<h1>纯粹使用 CSS更改标签的颜色。我怎样才能做到这一点？
PS ----- * Edited * ----------
PS ----- * 已编辑 * ----------
What if I wrap a div around it with an id in it?
如果我用一个 id 在它周围包裹一个 div 怎么办？
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#"></a>
</div>
Will this help?
这会有帮助吗？
采纳答案by Eric
There is no CSS selectorthat can do this (in CSS3, even). Elements, in CSS, are never aware of their parent, so you cannot do a:parent h1(for example). Nor are they aware of their siblings (in most cases), so you cannot do #container a:hover { /* do something with sibling h1 */ }. Basically, CSS properties cannot modify anything but elements and their children (they cannot access parents or siblings).
没有CSS 选择器可以做到这一点（甚至在 CSS3 中）。CSS 中的元素永远不会知道它们的父元素，因此您不能这样做a:parent h1（例如）。他们也不知道他们的兄弟姐妹（在大多数情况下），所以你不能这样做#container a:hover { /* do something with sibling h1 */ }。基本上，CSS 属性只能修改元素及其子元素（它们不能访问父元素或兄弟元素）。
You could contain the h1withinthe a, but this would make your h1hoverable as well.
你可以包含h1内的a，但是这会使你的h1hoverable为好。
You will only be able to achieve this using JavaScript (jsFiddle proof-of-concept). This would look something like:
您只能使用 JavaScript ( jsFiddle proof-of-concept)来实现这一点。这看起来像：
$("a.button").hover(function() {
$(this).siblings("h1").addClass("your_color_class");
}, function() {
$(this).siblings("h1").removeClass("your_color_class");
});
回答by Stephen P
You can make a sibling that followsan element change when that element is hovered, for example you can change the color of your alink when the h1is hovered, but you can't affect a previoussibling in the same way.
您可以在元素悬停时更改跟随元素的同级，例如，您可以a在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>We set the color of an H1 to a greenish hue, and the color of an A that is a sibling of an H1 to reddish (first 2 rules). The third rule does what I describe -- changes the A color when the H1 is hovered.
我们将 H1 的颜色设置为偏绿色，将 H1 的兄弟 A 的颜色设置为偏红色（前 2 条规则）。第三条规则就是我所描述的——当 H1 悬停时改变 A 颜色。
But notice the fourth rule a:hover h1only changes the background color of the H1 that followsthe anchor, but not the one that precedes it.
但通知第四条规则a:hover h1只改变H1的背景色如下锚，而不是一个它前面。
This is based on the DOM order, and it's possible to change the displayorder of elements, so even though you can't change the previous element, you could make that element appearto be after the other element to get the desired effect.
Note that doing this could affect accessibility, since screen readers will generally traverse items in DOM order, which may not be the same as the visualorder.
这是基于DOM顺序的，并且可以改变元素的显示顺序，所以即使你不能改变前一个元素，你也可以让这个元素看起来在另一个元素之后以获得想要的效果。
请注意，这样做可能会影响可访问性，因为屏幕阅读器通常会以DOM order遍历项目，这可能与视觉顺序不同。
回答by banzomaikaka
The Html:
Html：
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">link</a>
</div>?
The CSS:
CSS：
?#banner:hover h1 {
color: red;
}
#banner h1:hover {
color: black;
}
a {
position: absolute;
}
The Fiddle: http://jsfiddle.net/joplomacedo/77mqZ/
小提琴：http: //jsfiddle.net/joplomacedo/77mqZ/
The aelement is absolutely positioned. Might not be perfect for your exisiting structure. Let me know, I might find a workaround.
该a元素是绝对定位。可能不适合您现有的结构。让我知道，我可能会找到解决方法。
回答by Rajneesh Kumar Gobin
http://plnkr.co/edit/j5kGIav1E1VMf87t9zjK?p=preview
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>
here is an example how it can be done in pure css , hope it helps somebody
这是一个如何在纯 css 中完成的示例，希望对某人有所帮助
回答by Awilson089
Change the H1 tag into a link, style it the same as the normal text maybe? And then use this,
将 H1 标签更改为链接，样式与普通文本相同吗？然后用这个，
a:link {color:#FF0000;}
a:hover {color:#FF00FF;}
And it should work when you hover :) you can also make it specific by containing it in a div and then targeting it like this:
当你悬停时它应该可以工作:)你也可以通过将它包含在一个div中然后像这样定位它来使其特定：
.exampledivname a:link {color:#FF0000;}
.exampledivname a:hover {color:#FF00FF;}
This should help.
这应该有帮助。
