CSS hover on container

Question

So I'm generally very savvy when it comes to CSS but I have something that's stumping me a bit. The goal here is that a collection of elements inside a container all have the same hover effect at the same time. Here is the code so far: HTML:

<a href="" class="link-block no-decoration">
   <h6 class="uppercase">whitepaper</h6>
   <div class="section-break section-break-sm">
      <h4>Cras Fusce Fermentum Tortor Porta 4</h4>
      <span class="icon-file icon-2x">​</span>
   </div>
</a>

CSS:

.link-block *:hover {
    color: #0eb2ff !important;
    border-top-color: #0eb2ff;
}

So the important class here is link-block, and the goal, as stated above, is to simply force ALL elements inside that class to use these hover attributes.

Here is what's needed:

But here is what's happening:

Thanks for any sound advice!

Answer 1

The a is an inline element so you need to set it to display:block and then you can simply apply the :hover state to it directly.

.link-block {
  display:block
}
  
  .link-block:hover {
    color: #0eb2ff !important;
    border-top-color: #0eb2ff;
}

<a href="" class="link-block no-decoration">
   <h6 class="uppercase">whitepaper</h6>
   <div class="section-break section-break-sm">
      <h4>Cras Fusce Fermentum Tortor Porta 4</h4>
      <span class="icon-file icon-2x">​</span>
   </div>
</a>