cannot change hover color for link inside a div

June 7, 2022

I try to add a custom color to a link inside a div but its not working, the color does not change. Why is that?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
      .navigation-div a {
        display: block;
        font-size: 18px;
        color: #14133b !important;
        line-height: 1;
        margin-bottom: 26px;
    }

    .navigation-div a:hover {
        color: #CEA941 !important;
    }

    .navigation-div a:visited {
        color: #14133b !important;
    }
    .navigation-div a:link {
        color: #14133b !important;
    }
    .navigation-div a:visited {
        color: #14133b !important;
    }
  </style>
</head>

<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody><tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td valign="top"></td>
<td><div class="navigation-div">
<a href="#"> Motor  </a></div>
</td>
<td><div class="navigation-div">
<a href="#">12345 </a></div>
</td>
</tr>

</tbody></table>
</body>

</html>

>Solution :

You’re overwriting your hover styles with the :link selector a couple of lines later. In general, try and avoid overusing !important – there’s no need for it in this situation. Try this:

.navigation-div a {
  display: block;
  font-size: 18px;
  color: #14133b;
  line-height: 1;
  margin-bottom: 26px;
}

.navigation-div a:hover {
  color: #CEA941;
}

.navigation-div a:visited {
  color: #14133b;
}

<table class="table" style="border-bottom: 0px solid black;">
  <tbody>
    <tr>
      <td valign="top"></td>
      <td valign="top">header 1</td>
      <td valign="top">header 2</td>
    </tr>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td valign="top"></td>
      <td>
        <div class="navigation-div">
          <a href="#"> Motor  </a></div>
      </td>
      <td>
        <div class="navigation-div">
          <a href="#">12345 </a></div>
      </td>
    </tr>

  </tbody>
</table>

If you really need to keep the !important rules, you can just move your :hover style underneath the :link