Underlining in Javascript?

Question

Upon the realization that you can't have an inline pseudoclass -- How to write a:hover in inline CSS? -- I looked into having Javascript do the same job with the onMouseOver and onMouseOut events to simulate the :hover pseudoclass. I'm trying to remove the underline from the text when the mouse is above it. Is there a snippet of Javascript someone can offer that can do that?

I tried onMouseOver="this.style.textDecoration="none"", but I think the contrasting quotations are throwing everything off.

Any ideas?

Note: unfortunately, this effect must be achieved without the use of an external or internal stylesheet (inline only).

Answer 1

you can do this by

 onMouseOver="this.style.textDecoration='none';"

Answer 2

Here's your answer:

<a onmouseover="this.style.textDecoration='none';"  onmouseout="this.style.textDecoration='underline';">hover me</a>

if you're able to use jQuery it would be easier. Just write once the following code. You haven't to change your markup then.

<script type="text/javascript">
(function($) {
    $( function() {
        $('a').hover(
            function() {
                $(this).css('text-decoration','none');
            },
            function() {
                $(this).css('text-decoration','underline');
            }
        )
    } );
} (jQuery));
</script>

Answer 3

I think you shouldn't use javascript, but CSS:

.underlineHover:hover {
    text-decoration: underline;
}

<span class="underlineHover">Content</span>

Note: I used the class underlineHover, but be aware that classes should have a semantic meaning instead of styling one.