CSS：锚链接悬停不起作用

Question

我想要的是当我将鼠标悬停在锚元素上时，应该应用悬停类。但似乎它没有用。 h1元素位于锚元素内。因此，我必须使用h1选择a h1:hover元素，然后才应用此类。 唯一值得关注的是当我将颜色应用于h1然后悬停停止工作，否则效果很好。我不知道为什么会这样。有人可以帮忙吗？谢谢。 Code pen to play

HTML：

<a href="">
  <h1>This will not work on hover</h1>
</a>

CSS：

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

<a href="">
  <h1>This will not work on hover</h1>
</a>

Answer 1

CSS特异性并不像您想象的那样完全正常工作。

您可以在此处详细了解：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

关于您可以更改的问题：

a:hover{
    color: salmon;
}

到

a:hover h1{
    color: salmon;
}

它将起作用，因为上面的选择器更具体来自：

h1{
   color: magenta;
}

因此，当a悬停时，它会覆盖它。

最后的html / css让你测试我说的话：

<a href="">
   Anchor Text
   <h1>Heading Text</h1>
</a>

和

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

a:hover h1{
  color: yellow;
}

h1{
  color: magenta;
}

Answer 2

试试这个

<强> demo

<强> CSS

a, a h1:link{
  color: teal;
}
a h1:hover{
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

Answer 3

试试这个

a, a:link{
  color: teal;
}
a:hover h1 {
  color: salmon;
}

h1{
  color: magenta;
}

<a href="#">
  <h1>This will not work on hover</h1>
</a>

Answer 4

你也错过了#，我添加了一个css

a:hover h1{
 color: salmon;
}

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

a:hover h1{
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

<a href="#">
  <h1>This will not work on hover</h1>
</a>

Answer 5

尝试：

a, a:link{
  color: teal;
}
a:hover h1 {
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

<a href="">
  <h1>This will not work on hover</h1>
</a>

希望这有帮助！