I make a static error page, insert a link into the text:

<a style="text-decoration:none;" onmouseover="this.style.textDecoration=underline" href="http...../">www.home.org</a> <a style="text-decoration:none;" onmouseover="this.style.textDecoration=underline" href="http...../">www.home.org</a> does not work.

I wanted to insert at the beginning in the tags <style> a:hover {text-decoration: underline;} </style> this also does not work. How so?

  1. onmouseover="this.style.textDecoration="underline""

  2. onmouseover="this.style.textDecoration='underline'"

  3. onmouseover='this.style.textDecoration="underline"'

and what option should be?

working second option. Only the underline remains when the cursor is gone, well, I’m going to lie down, I grab) thank you all))

  • It is worth seeing what error the browser console is writing. Apparently forgotten quotes around underline - Grundy
  • onmouseover="this.style.textDecoration='underline'" , or onmouseover="this.style.textDecoration=\"underline\"" - SLy_huh
  • @SLy_huh, either as a third option in response - Grundy

1 answer 1

In the above code, there are no quotes around the underline , so at the time of execution a variable with the same name will be searched for, and if it is not there will be a corresponding error.

To fix it, just frame all with quotes, like this:

 onmouseover="this.style.textDecoration='underline'"

Since this handler is only responsible for the situation when the cursor is over the element, when the cursor leaves, no code is executed and the style remains the one that was assigned:

 text-decoration: underline

For the solution, you can use the events mouseout , mouseleave

The best solution is not to use scripts for the purpose specified in the question, but to use css.

Why didn't the option with the style in question work?

Because inline-style, have higher priority, and

 style="text-decoration:none;"

Just always interrupted the style specified in the style tag.

For the solution, you can remove inline-style, and add a rule to the tag:

 a { text-decoration:none; } a:hover { text-decoration: underline; }