Question

This is my first post here.

What I want to be able to do is change how a link acts when the mouse hovers over it.
I don’t want to use any style sheets, just simply add it straight into the anchor tag.

Something like this:

<a style=" a:hover"text-decoration: underline;color:red;"" href="www.www.www"> LINK </a>

Any ideas?

Thanks 🙂

Answer 1

style atributes aren’t meant to handle pseudo-classes inline.

To get that effect inline within the <a> tag you can try:

---

HTML

<a href="www.www.www"
    onmouseover="this.style.textDecoration='underline'; this.style.color='red';"
    onmouseout="this.style.textDecoration=none; this.style.color='';">
    LINK</a>

Or using a javascript function

HTML

<a href="www.www.www"
    onmouseover="Hover(this, true);"
    onmouseout="Hover(this, false);">
    LINK</a>

JavaScript

function Hover(element, hover)
{
    element.style.textDecoration = hover ? 'underline' : 'none';
    element.style.color = hover ? 'red' : '';
}

---

Naturally, CSS handles this much better and would be the recommended way to do this:

HTML

<a href="www.www.www">LINK</a>

CSS

a:hover { color: red; text-decoration: underline; }

---

Is there a reason you cannot use a stylesheet?