css - 让悬停选择器在包含其他元素的 anchor 上工作

Question

使用 html 5，我有一个包含 block 元素(例如 p 元素)的 anchor 元素。我希望 p 元素中的文本在悬停时发生变化——它们不会。

p {
  color: #222222;
}

a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: red !important;
  text-decoration: none;
}

<p><a href="test.htm">This changes color on hover</a>.</p>
<a href="test.htm">
  <p>This doesn't change color on hover.</p>
</a>

在我的例子中， anchor 元素中有许多元素，我无法更改这些元素的 CSS 样式(例如，我无法更改 p 元素的悬停选择器)。

谢谢!

Answer 1

p 不会从周围的 a 标签继承悬停颜色，因为它有自己的 color 参数(感谢@BoltClock) .但是您可以使用 a:hover, a:hover p { ... } 作为选择器来获得您想要的内容:

p {
  color: #222222;
}

a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:hover p
{
  color: red !important;
  text-decoration: none;
}

<p><a href="test.htm">This changes color on hover</a>.</p>
<a href="test.htm">
  <p>This also changes color on hover.</p>
</a>