Peter Bridger Peter Bridger - 8 months ago 62
CSS Question

Is it possible to create inline pseudo styles?

Is it possible to create inline pseudo styles?

For instance, can I do something like the following?

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

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


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; }
<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.