Question

以下是我的HTML

<h1>Heading</h1>
<a class="button" href="#"></a>

我想要做的是，当我将<a>标记悬停时，我想纯粹使用CSS更改<h1>标记的颜色。我怎样才能做到这一点？

PS ----- *编辑* ----------

如果我在其中包含带有id的div，该怎么办？

<div id="banner">
    <h1>Heading</h1>
    <a class="button" href="#"></a>
</div>

这会有帮助吗？

Answer 1

当该元素悬停时，您可以制作跟随元素更改的兄弟元素，例如，当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 &quot;Button&quot;</a>
<h1>Another Heading</h1>

我们将H1的颜色设置为绿色色调，并将A的颜色设置为H的兄弟色！偏红（前2条规则）。第三条规则符合我的描述 - 当H1悬停时改变A颜色。

但是请注意第四条规则a:hover h1只会更改跟随锚点的H1的背景颜色，而不会改变它之前的那个。

Answer 2

没有CSS selector可以执行此操作（in CSS3, even）。在CSS中，元素永远不会知道它们的父元素，因此您不能执行a:parent h1（例如）。他们也不知道他们的兄弟姐妹（在大多数情况下），所以你不能做#container a:hover { /* do something with sibling h1 */ }。 基本上，CSS属性不能修改任何元素及其子元素（它们不能访问父母或兄弟姐妹）。

您可以在{/ 1}} 中包含h1 ，但这也会使您的a也可以恢复。

您只能使用JavaScript（jsFiddle proof-of-concept）来实现此目的。这看起来像是：

h1

Answer 3

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元素绝对定位。对于你现有的结构，可能并不完美。请告诉我，我可能会找到一种解决方法。

Answer 4

首先，多年来我一直在使用stackoverflow，并感谢大家提供的出色答案和帮助。但是，现在该是该注册并开始为陷入困境的人提供我帮助的了，即使这个问题已经很久了：

仅需几行CSS和一些基本的Flexbox的理解，就可以实现这一点。与Stephen P said in his answer一样，adjacent sibling combinator的确选择了紧随其后的兄弟姐妹。要实现OP的要求，您可以使用两种弹性方法：

方法1（using "flex-flow" shorthand property）

.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（using "order" property和多个孩子）

.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>

奖金：

CodePen Bonus

Answer 5

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

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

当你悬停时它应该可以工作:)你也可以通过将它包含在div中然后将它作为目标来实现它：

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

这应该有所帮助。

Answer 6

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中完成它的例子，希望它可以帮助某人

Answer 7

有人帮助了我，所以我想我也要在这里分享。

在您的第一个示例中，使用纯CSS实际上是不可能的。但是，当您将其与父容器一起包装后，便可以处理带有悬停子代的东西。

df <- structure(list(Tag = c("V1", "V1", "V1", "V1", "V1", "V1", "V2", 
"V2", "V2", "V3", "V3", "V3", "V3", "V4", "V4", "V4"), From_ID = c("FR212", 
"BL342", "PX123", "KJ214", "SD234", "BL342", "FR231", "CV231", 
"BL231", "KJ875", "TR543", "FR342", "PX239", "DS329", "DF321", 
"FR321"), To_ID = c("SD234", "KJ214", "FG342", "BL342", "BL342", 
"FR212", "BL231", "KJ123", "FR231", "FG432", "TR998", "PX239", 
"KJ123", "HG734", "FR321", "DF321"), Date = c("24/08/2019", "5/05/2019", 
"22/04/2019", "1/01/2019", "13/09/2018", "30/04/2018", "16/09/2019", 
"7/01/2018", "11/01/2017", "14/11/2019", "26/10/2019", "2/07/2019", 
"15/07/2017", "30/01/2019", "6/05/2017", "20/03/2017"), Rank = c(1L, 
2L, 3L, 4L, 5L, 6L, 1L, 2L, 3L, 1L, 2L, 3L, 4L, 1L, 2L, 3L), 
    Flag = c(TRUE, TRUE, FALSE, FALSE, FALSE, FALSE, TRUE, FALSE, 
    FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, TRUE, FALSE)),
    class = "data.frame", row.names = c("1", 
"2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", 
"14", "15", "16"))

#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;
}

父母只控制当前没有被盘旋的孩子。然后，您可以为单个元素和类设置悬停状态，从而无需JS就可以进行同级选择。

这是此操作的更高级示例

https://codepen.io/levyA/pen/gOrdaLJ

Answer 8

对于同级元素中的设置样式，可以使用〜字符在第一种情况下，当h1悬停为标签设置颜色时在第二种情况下，当a悬停时，更改h1部分的背景颜色

h1:hover ~ a {
    color: #e34423;
}
a:hover ~ h1 {
    background-color: #eee;
}

Answer 9

这可能行得通，我最近使用了这个想法来停止动画中的兄弟元素。

h1 { color: inherit; }

#banner:hover { color: your choice; }

使用CSS更改悬停时兄弟元素的颜色

9 个答案: