Is is possible to create inline pseudo styles?

Question

So for instance, can I do something like

<a href="#" style="background-color:green;{hover:background-colour:red;}">Coding Horror</a>

The reason behind this is I'm developing a .net library that creates UI elements, I want to be produce HTML elements that can have their hover state set without the use of an external style sheet.

Answer 1

Unfortunately no, you can't implement hover effects using inline CSS.

A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

If you could force your users to drop a "style control" at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).

Unfortunately there's no elegant solution to this problem.

Answer 2

Or you can use Jquery's hover function and set the background color.

http://docs.jquery.com/Events/hover

Answer 3

This is kind of a Catch-22 situation.

On one hand, you can add a style block right before your Element's inserted in the page, but Chris Pebble points out the problems with that. (If you decide on this, make sure you pick very unique IDs for your Elements so your selectors don't accidentally select and style anything else).

On the other hand, you can do something like this:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a>

But, that's nasty in it's own right as it ties together markup, presentation, behavior and a whole bunch of other things.

You could also inject a stylesheet into the page by writing out a link tag or manipulating document.stylesheets, but that's going to trigger a download.

I've usually seen the first method (adding a style block) done on large, "modular" portal sites that do this sort of thing, so maybe that's the de-facto standard (it at least is more readable and maybe easier to maintain than cramming JavaScript in there?). The JavaScript method seems to have the least impact on the DOM and the overall page as you're keeping your presentation to yourself.

This is one of those front-end dev morasses where every answer you choose is wrong to some extent, so weigh the options and pick what's easiest for you to build and maintain.