CODEWITHSUNDEEP
htmlcss
tganyan
tganyan

Reputation: 633

CSS hover on container

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: enter image description here

But here is what's happening:

enter image description here

Thanks for any sound advice!

Upvotes: 3

Views: 4432

Answers (2)

Florian
Florian

Reputation: 3171

Just change the

.link-block *:hover {

to

.link-block:hover {

Upvotes: 3

gavgrif
gavgrif

Reputation: 15499

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>

Upvotes: 3

Related Questions