How to write a:hover in inline CSS?

Question

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.

How can I use a:hover in inline CSS inside the HTML style attribute?

E.g. you can't reliably use CSS classes in HTML emails.

Answer 1

Short answer: you can't.

Long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style.

:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).

Response to the OP's comments:

See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.

Also, don't forget, you can add links to external stylesheets if that's an option. For example,

<script type="text/javascript">   var link = document.createElement("link");   link.setAttribute("rel","stylesheet");   link.setAttribute("href","http://wherever.com/yourstylesheet.css");   var head = document.getElementsByTagName("head")[0];   head.appendChild(link); </script> 

Caution: the above assumes there is a head section.

Answer 2

You can get the same effect by changing your styles with JavaScript in the onMouseOver and onMouseOut parameters, although it's extremely inefficient if you need to change more than one element:

<a href="abc.html"     onMouseOver="this.style.color='#0F0'"     onMouseOut="this.style.color='#00F'" >Text</a>

Also, I can't remember for sure if this works in this context. You may have to switch it with document.getElementById('idForLink').