How do I remove the text underline (that I set myself) from a <span> on hover?

Question

I want to have a link but I want to have a jQuery event fire onclick so I am using a <span> with an id instead of a link so I can listen for the click event.

I want to make the <span> look like a link so:

1. The cursor should show a hand when the <span> is hovered
2. The <span> should be underlined and blue

This works fine in CSS, but I want to remove the underline when I hover. How would I do this in CSS?

Answer 1

"i want to have a link but i want to have jquery event fire onclick so i am using a span instead of a link"

Why not just place the click event on the <a href='whatever'>?

  // Use the actual ID instead of 'a'.
$('a').click(function( event ) {
    event.preventDefault(); // Prevent the link from being followed
    // do something
});

Then change the text-decoration of the <a> on using the pseudo :hover

a:hover {
    text-decoration:none;
}

If you do it on a <span> instead, the :hover won't work in IE6.

Answer 2

span:hover {
    text-decoration: none;
}