cannot change hover color for link inside a div-CodePudding

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  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 >
<a href="#"> Motor  </a></div>
</td>
<td><div >
<a href="#">12345 </a></div>
</td>
</tr>

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

</html>

CodePudding user response：

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  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 >
      <a href="#"> Motor  </a></div>
     </td>
     <td><div >
     <a href="#">12345 </a></div>
     </td>
   </tr>

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

</html>

CodePudding user response：

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

CodePudding user response：

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  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 >
          <a href="#"> Motor  </a></div>
      </td>
      <td>
        <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

CodePudding user response：

<!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  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 >
<a href="#"> Motor  </a></div>
</td>
<td><div >
<a href="#">12345 </a></div>
</td>
</tr>

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

</html>

use this code . it's work .

CodePudding user response：

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  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 >
            <a href="#"> Motor </a>
          </div>
        </td>
        <td>
          <div >
            <a href="#">12345 </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>