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).

Are you sure you cannot use a `style` element? People often assume that because they cannot affect the `head` element. But `style` actually works inside `body` too (even though formal HTML syntax forbids it). — Jukka K. Korpela, Oct 28 '12 at 15:26

score 7 · Accepted Answer · answered Oct 28 '12 at 15:09

7

you can do this by

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

answered Oct 28 '12 at 15:09

NullPoiиteя

56,591
22
125
143

This works, but I also found that the semicolon is unnecessary. Is that just good coding habit? – Code Monkey Oct 28 '12 at 15:11
2

It is good coding habit, but for one statement it is unnecessary. Also you could do `onMouseOver='this.style.textDecoration="none";'` (the reverse of quotes) if you preferred it – vol7ron Oct 28 '12 at 15:11
2

Javascript works without semi-colons at the end of statements. But putting one to explicitly mark the end of statements is always a good practice. – techfoobar Oct 28 '12 at 15:12
@CodeMonkey you should use semicolon it is a good coding habit. – StaticVariable Oct 28 '12 at 15:12
@CodeMonkey i am sure you read the vol7ron and techfoobar advice – NullPoiиteя Oct 28 '12 at 15:16
@vol7ron You can even do `onMouseOver="this.style.textDecoration="none";"` but that's just getting silly. Really, an alternative solution would be ideal, preferably using traditional CSS. – Niet the Dark Absol Sep 25 '13 at 22:09

score 4 · Answer 2 · answered Oct 28 '12 at 15:09

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>

score 1 · Answer 3 · answered Sep 25 '13 at 21:48

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.

Underlining in Javascript?

3 Answers3

Linked