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