在下面的 HTML 中，当我将鼠标悬停在<a>元素上时，我想<h1>仅使用 CSS 更改元素的颜色。有没有办法做到这一点？
<h1>Heading</h1>
<a class="button" href="#"></a>
如果我用一个 id 在它周围包裹一个 div 怎么办？
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#"></a>
</div>
这会有帮助吗？
问问题
101998 次
10 回答
119
您可以在元素悬停时创建跟随元素更改的兄弟，例如，您可以在悬停时更改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>我们将 H1 的颜色设置为绿色，将作为 H1 的兄弟的 A 的颜色设置为红色（前 2 条规则）。第三条规则符合我的描述——当 H1 悬停时改变 A 颜色。
但是请注意第四条规则a:hover h1只改变了锚点之后的 H1 的背景颜色，而不改变它之前的 H1 的背景颜色。
这是基于 DOM 顺序的，并且可以更改元素的显示顺序，因此即使您无法更改前一个元素，您也可以使该元素看起来在另一个元素之后以获得所需的效果。
请注意，这样做可能会影响可访问性，因为屏幕阅读器通常会以DOM 顺序遍历项目，这可能与视觉顺序不同。
于 2012-09-25T00:48:29.010 回答
21
没有CSS 选择器可以做到这一点（在 CSS3 中，甚至）。CSS 中的元素永远不会知道它们的父级，所以你不能这样做a:parent h1（例如）。他们也不知道他们的兄弟姐妹（在大多数情况下），所以你不能这样做#container a:hover { /* do something with sibling h1 */ }。基本上，CSS 属性只能修改元素及其子元素（它们不能访问父元素或兄弟元素）。
您可以h1 在 中包含a，但这也会使您的h1悬停。
您只能使用 JavaScript（jsFiddle 概念证明）来实现这一点。这看起来像：
$("a.button").hover(function() {
$(this).siblings("h1").addClass("your_color_class");
}, function() {
$(this).siblings("h1").removeClass("your_color_class");
});
于 2012-09-25T00:24:54.273 回答
10
#banner:hover h1 {
color: red;
}
#banner h1:hover {
color: black;
}
a {
position: absolute;
}<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">link</a>
</div>小提琴：http: //jsfiddle.net/joplomacedo/77mqZ/
a元素是绝对定位的。可能不适合您现有的结构。让我知道，我可能会找到解决方法。
于 2012-09-25T00:52:38.597 回答
4
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 中完成的示例，希望对某人有所帮助
于 2016-01-21T06:24:40.080 回答
3
确实可以通过几行 CSS 和一些基本的Flexbox理解来实现。
正如斯蒂芬 P 在他的回答中所说，相邻的兄弟组合器确实选择紧随其后的兄弟姐妹。为了实现 OP 的要求，您可以使用两种弹性方法：
方法 1（使用“flex-flow”速记属性）
.flex-parent {
display: flex;
flex-flow: column-reverse wrap
}
.flex-child-1:hover + .flex-child-2 {
color: #FF3333;
}<div class="flex-parent">
<a class="flex-child-1">Hover me</a>
<h1 class="flex-child-2">I am changing color</h1>
</div>方法2（使用“订单”属性和多个孩子）
.flex-parent {
display: flex;
flex-direction: column;
}
.flex-child-1 {
order: 2;
}
.flex-child-2 {
order: 1;
}
.flex-child-3 {
order: 3;
}
.flex-child-1:hover+.flex-child-2 {
color: #FF3333;
}<div class="flex-parent">
<h1 class="flex-child-3">I am not changing color</h1>
<a class="flex-child-1">Hover me</a>
<h1 class="flex-child-2">I am changing color</h1>
</div>奖金：
于 2020-11-23T02:37:24.847 回答
1
将 H1 标签更改为链接，样式可能与普通文本相同？然后用这个，
a:link {color:#FF0000;}
a:hover {color:#FF00FF;}
当您悬停时它应该可以工作:)您还可以通过将其包含在 div 中然后像这样定位它来使其具体化：
.exampledivname a:link {color:#FF0000;}
.exampledivname a:hover {color:#FF00FF;}
这应该会有所帮助。
于 2012-09-25T00:22:32.577 回答
0
对于兄弟元素中的设置样式，您可以在第一种情况下使用 ~ 字符，当 h1 悬停时为标签设置颜色，在第二种情况下，当 a 悬停时，更改 h1 部分的背景颜色
h1:hover ~ a {
color: #e34423;
}
a:hover ~ h1 {
background-color: #eee;
}
于 2020-09-27T11:36:10.877 回答
0
这可能有效，我最近使用这个想法来停止动画中的兄弟元素。
h1 { color: inherit; }
#banner:hover { color: your choice; }
于 2020-10-23T19:09:51.377 回答
0
有人帮我解决了这个问题，所以我想我也会在这里分享。
在您的第一个示例中，纯 CSS 确实是不可能的。然而，当你用一个父容器包装它时，你就可以用悬停的孩子做很多事情。
#banner:hover>h1{
color:red;
}
h1:hover{
color:black !important;
}
#banner{
display:inline-block;
}
.button{
display:inline-block;
font-size:24px;
width:100%;
border:1px solid black;
text-align:center;
}
h1{
padding:0;
margin:0;
}<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">Button!</a>
</div>父级仅控制当前未悬停的子级。然后，您可以为单个元素和类设置悬停状态，以便在没有 JS 的情况下进行兄弟选择。
这是一个更高级的例子
于 2020-09-16T22:15:40.887 回答
0
试试这个单行纯 CSS 解决方案：
.parent:hover .child:not(:hover) {
/* this style affects all the children *except* the one you're hovering over */
color: red;
}
更多信息：https ://codyhouse.co/nuggets/styling-siblings-on-hover
于 2021-10-16T08:23:58.767 回答