关于html：使用CSS更改悬停时兄弟元素的颜色


Change color of sibling elements on hover using CSS

本问题已经有最佳答案，请猛点这里访问。

以下是我的HTML

1
Heading

我想要做的是，当我将标记悬停时，我想仅使用CSS更改标记的颜色。 我该如何实现？

聚苯乙烯
----- *编辑* ----------

如果我将div周围包裹一个ID，该怎么办？

1
    Heading

请问有帮助吗？

相关讨论

您可以在悬停元素时在元素更改之后进行兄弟操作，例如，当悬停h1时可以更改a链接的颜色，但不能以相同的方式影响先前的兄弟姐妹。

1
2
3
4
5
6
7
8
9
10
11
12
h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}
h1:hover + a {
    color: #4f4fd0;
}
a:hover + h1 {
    background-color: #444;
}
1
2
3
Heading
The"Button"
Another Heading

我们将H1的颜色设置为绿色，将A1的颜色设置为H1的同色(前两个规则)。第三个规则是我所描述的-悬停H1时更改A颜色。

但是请注意，第四个规则a:hover h1仅更改了锚点之后的H1的背景颜色，而不更改其前面的背景色。

这是基于DOM顺序的，并且可以更改元素的显示顺序，因此，即使您不能更改前一个元素，也可以使该元素看起来像在另一个元素之后，以获得所需的效果。
请注意，这样做可能会影响可访问性，因为屏幕阅读器通常会以DOM顺序遍历所有项目，而DOM顺序可能与视觉顺序不同。

相关讨论

没有CSS选择器可以做到这一点(甚至在CSS3中)。 CSS中的元素永远不会知道其父元素，因此您不能执行a:parent h1(例如)。他们也不知道自己的兄弟姐妹(在大多数情况下)，因此您无法执行#container a:hover { /* do something with sibling h1 */ }。基本上，CSS属性只能修改元素及其子元素(它们不能访问父级或同级)。

您可以将h1包含在a中，但这也会使您的h1也可悬停。

您将只能使用JavaScript(jsFiddle概念验证)来实现此目的。这看起来像：

1
2
3
4
5
$("a.button").hover(function() {
    $(this).siblings("h1").addClass("your_color_class");
}, function() {
    $(this).siblings("h1").removeClass("your_color_class");
});
相关讨论

HTML：

1
2
3
    Heading
    link
?

CSS：

1
2
3
4
5
6
7
8
9
10
11
?#banner:hover h1 {
    color: red;
}

#banner h1:hover {
    color: black;
}

a {
    position: absolute;
}

小提琴：http：//jsfiddle.net/joplomacedo/77mqZ/

a元素是绝对定位的。可能不适合您现有的结构。让我知道，我可能会找到一种解决方法。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js">
    <style>
      ul:hover > li
      {
        opacity: 0.5;
      }
      ul:hover li:hover
      {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    Hello Plunker!
   
<ul>

     
<li>
Hello
</li>

     
<li>
Hello
</li>

     
<li>
Hello
</li>

     
<li>
Hello
</li>

     
<li>
Hello
</li>

   
</ul>

  </body>

</html>

这是一个可以在纯CSS中完成的示例，希望对您有所帮助

将H1标签更改为链接，使其样式与普通文本相同吗？
然后用这个

1
2
a:link {color:#FF0000;}      
a:hover {color:#FF00FF;}

当您将鼠标悬停时它应该可以工作:)您也可以通过将其包含在div中，然后像这样定位它来使其变得特定：

1
2
.exampledivname a:link {color:#FF0000;}      
.exampledivname a:hover {color:#FF00FF;}

这应该有所帮助。

相关讨论