cannot change hover color for link inside a div

user_2153383 0
Viewed 43

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>
css
5 Answers

Remove the important keyword from your style in .navigation-div a, a: link and a:visited (you dont need the important keyword anywhere):

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

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

user_13411810 

<!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;
    }

    td .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>

use this code . it's work .

user_192823280

All those !important "collide" with each other; simply maintaining the one assigned to the navigation-div a:hover should be enough. Try not overuse the !important keyword, usually it's not the best thing to do.

In your code, the color property of navigation-div a:hover was overwritten multiple times by the other selectors. The only one that should prevail on the others, for your intended behavior, is the hover one, in fact you could also omit the other selectors and so the use of !important.

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

.navigation-div a:hover {
  color: #cea941;
}
<!DOCTYPE html>

<html>

<head>
  <title>Untitled</title>
</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>

user_103013220

So since you're using a table you have to go through each element like this :

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
    /* a{
      color: black;
    }
    a:hover{
      color: reds;
    } */
table> tbody > tr>td>.navigation-div >a:hover{
 color: red;
}

</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>

user_184914570
Related