Inline CSS for anchor tag and hover

There's no way to do that.

Inline CSS can't touch pseudo-classes such as :hover.

I'm guessing the reason you want to do this is because you can only edit the <body> of the HTML (for whatever reason). What you can do is add a style element:

<style>
a:hover {
    background: #FFDD00;
    color: #AAAAAA;
}
</style>

<a href="#">...</a>

Having a style element outside the <head> is not valid HTML, but (crucially) it does work in all browsers.


If you can't toss your hover CSS into a tag, then the best way to handle this is going to be JavaScript. I wouldn't ordinarily call this a good approach, but it sounds like your hands are tied here.

<a href="..."
   onmouseover="this.style.backgroundColor='#ffdd00';this.style.color='#aaaaaa'"
   onmouseout="this.style.backgroundColor='transparent';this.style.color='inherit'">
...
</a>

Hope that works for you!


Found this in an old forum and it seems to work great :)

<a href="###" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">###</a>

Tags:

Css

Recent Posts