jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

Question

I have a table of 3-4 columns, the central one being task names that are also links(yet another todo app..groan). Im trying to make it so that whenever the mouse hovers over any part of the table row - not just the link itself - the link will appear underlined. Its a small detail but its been annoying me like hell and i refuse to let it get the better of me now.

At first i tried jQuery with a (forgive the obvious syntax errors but this is the jist)

$('#row_in_question').hover( 
function(){ $(this).find(...the link..).toggleClass("highlighted") },
function(){ $(this).find(...the link..).toggleClass("highlighted") }
);

with this as a styling for the a element in general

.highlighted {
text-decoration: underlined;
}

and it did indeed toggle the highlighted class on that link - however css inheritance got in the way and no visual changes made. Since i previously styled that link to have no underline when not hovered it wouldnt change the style.

So how do i go about this? I dont want the whole row to become clickable, I just want the text to become underlined.

Answer 1

What about changing the css

$('#row_in_question').hover( 
    function(){ $(this).find(...the link..).css({'textDecoration': 'underline'}) },
    function(){ $(this).find(...the link..).css({'textDecoration': 'none'}) }
);

Answer 2

you can also whatever:hover on the TR to do it for you, although if you are already using Jquery it might be best to stick with rahuls idea.

http://www.xs4all.nl/~peterned/csshover.html

Answer 3

For a CSS only solution:

CSS

td a {text-decoration: none;}
td {padding:10px 5px 0 5px;}
tr:hover a {text-decoration:underline}

HTML

<table>
     <tbody>
    <tr>
        <td>aaa</td>
        <td><a href="#">bbb</a></td>
        <td>ddd</td>
     </tr>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td><a href="#">ddd</a></td>
     </tr>
  </tbody>
 </table>