How do you change a links behavior directly?

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?

Answer 2

It's not possible to do an hover (or any pseudo classes for that matter) on a anchor with inline css only.

Possible solutions are using either javascript with the onmouseoverevent and then changing the style (but that includes javascript and I wouldn't use javascript for styling). Or just using css in the <style> tag.

On the other hand I can't see why you can't include a stylesheet (either external or internal) other then when you're using it for XSS or anything like that :p