After investing some time into solving this issue, I am still struggling to find a solution. Essentially, what I want is for the :hover pseudo-class to trigger the border-bottom effect only when I hover over the text in a table.
Currently, the :hover pseudo-class activates when I hover within the table cell, but my aim is to have it activate specifically when hovering over the text.
Here is the link to my jsfiddle for reference:
(Unfortunately, the border-bottom effect isn't highlighting in the jsfiddle preview)
Here are snippets of my code:
<table id="navbar">
<tr>
<td class="nav1"></td>
<td id="hover" class="nav2"><a href="http://www.google.com/">home</a></td>
<td id="hover" class="nav2"><a href="http://www.google.com/">products</a></td>
<td id="hover" class="nav2"><a href="http://www.google.com/">services</a></td>
<td id="hover" class="nav2"><a href="http://www.google.com/">about</a></td>
<td id="hover" class="nav2"><a href="http://www.google.com/">contact</a></td>
<td class="nav1"></td>
</tr>
</table>
table#navbar {
border:3px solid black;
margin:0 auto;
border-collapse:collapse;
}
td.nav2 {
text-align:center;
width:100px;
font-size:20px;
font-weight:bold;
}
td.nav1 {
width:243px;
}
a:visited, a:link {
color:black;
text-decoration:none;
}
td#hover:hover {
border-bottom:3px solid e8e8e8;
padding-bottom:1px;
}
I apologize if my question is unclear.
Edit: I have fixed the issue with the jsfiddle, thank you for all the responses!
Edit 2: I believe I have successfully achieved the desired functionality, thanks again for all the help.