Issue
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"> </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
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"> </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>Answered By - Usama
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.