KrMa KrMa - 1 month ago 10
CSS Question

hover on h3 tag not working

I would like when you hover over "Marketing" the link turns red. I am not quite sure why this is not working? The underline is working, but not the hover.



h3.kompetenceLinks {
text-decoration: underline;
}
h3.kompetenceLinks:hover {
color: red;
}

<div class="service small">
<i class="fa fa-tablet"></i>
<a href="artikler/marketing.php"><h3 class="kompetenceLinks">Marketing</h3></a>
</div>




Answer

Your code should work fine. Make sure that no other rule is overwriting your hover color (e.g. with !important declarations or higher specificity). You can check that with the help of the developer tools of your browser.

h3.kompetenceLinks {
  text-decoration: underline;
}
h3.kompetenceLinks:hover {
  color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="service small">
  <i class="fa fa-tablet"></i>
  <a href="artikler/marketing.php"><h3 class="kompetenceLinks">Marketing</h3></a>
</div>