hover not working in block level link

Vote count:

0

HTML5 allows wrapping a block level in an anchor tag. However it seems that as soon as the color of an selector (in the example h4) is previously declared, declaring a new link and hover color does not work.

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

h4 {
  color: orange;
}

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

.test a:hover {
    color: red;
}

You can find this example at Codepen: http://ift.tt/1sdrsv5

In this example the paragraph text has the correct link color (green) and hover color (red). The h4 heading doesn't. As soon as you take the h4 declaration in the css away it works fine. Unfortunately this simple solution is not possible in my project. Is this a css bug or am I doing something wrong? Any help would be appreciated very much.

asked 21 secs ago

Ixillion

1

hover not working in block level link