hover не работает на уровне уровня ссылки

Question

HTML5 позволяет обернуть уровень блока в привязном теге. Однако кажется, что, как только цвет селектора (в примере h4) объявлен ранее, объявление новой ссылки и цвет наведения не работает.

h4 { 
 
    color: orange; 
 
} 
 

 
.test a:link, .test a:active, .test a:visited { 
 
    color: green; 
 
    display: inline-block; 
 
} 
 

 
.test a:hover { 
 
    color: red; 
 
}

<div class="test"> 
 
    <a href="#"> 
 
     <h4>Heading</h4> 
 
     <p>This is the paragraph</p> 
 
    </a> 
 
</div>

Вы также можете найти этот пример в Codepen: http://codepen.io/Ixillion/pen/ouBrD

В этом примере текст абзаца имеет правильный цвет ссылки (зеленый) и наведите цвет (красный). В заголовке h4 нет.
Как только вы берете декларацию h4 в css прочь, она отлично работает. К сожалению, это простое решение невозможно в моем проекте.
Является ли это ошибкой css или я делаю что-то неправильно? Любая помощь будет очень признательна.

Answer 1

Вы меняете цвет тега привязки, а не элемент заголовка. Вероятно, это ошибка CSS, если это разрешено в HTML5, поскольку я этого не видел. Вы могли бы сузить свой селектор до .test a:hover h4 или .test a h4:hover в зависимости от того, что работает.

Answer 2

Это потому, что вы меняете цвет тега a при наведении курсора, а не на цвет тега h4. Поскольку h4 ближе к тексту, который вы хотите изменить, CSS для этого тега переопределяет CSS для вашего тега a.

Попробуйте следующий код:

.test a:hover h4{ 
    color: red; 
} 

Это меняется цвет h4 при наведении на a.