Начало работы с селектором при наведении на якорь, содержащий другие элементы

Question

Используя html 5, у меня есть элемент привязки, который содержит элементы блока (например, элементы p). Я хочу, чтобы текст в элементах 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>

В моем случае в элементе привязки есть множество элементов, и я не могу изменить стили CSS этих элементов (например, я не могу изменить селектор при наведении курсора на элементы p).

Спасибо!

Answer 1

Попробуйте, это изменит селектор наведения для всех элементов 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;
}
a p:hover{
  color: red;
}

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

Answer 2

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>