How to write a:hover in inline CSS?

html css inline-styles
Amr Elgarhy picture Amr Elgarhy · Jun 23, 2009 · Viewed 1.1M times · Source

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

Jonathan Fingland picture Jonathan Fingland · Jun 23, 2009

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.

Related questions

Using CSS :before and :after pseudo-elements with inline CSS?

I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements. If so, how would I implement something like this …

Read More
CSS Pseudo-classes with inline styles

Is it possible to have pseudo-classes using inline styles? Example: <a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> I know the above HTML won't work but is there something similar that will? …

Read More
CSS selector by inline style attribute

Is there a CSS selector to select this element by its inline style attribute value? <div style='display:block'>...</div> something like div[cssAttribute=cssValue]

Read More