Pseudo-Classes Fix for Internet Explorer

Despite the fact that it has been almost six years since CSS 2 specification became a W3C recommendation, Internet Explorer, the dominating browser that is being forced onto unsuspecting public my Microsoft Corporation, still fails to implement pseudo-classes, such as :hover and :active, for all but anchor elements.

Majority of web developers redeem this problem by polluting thier HTML with endless onmouseover and onmouseout handlers. Very few realize that the time Microsoft could not find to create a compliant browser was wasted on development of proprietory features, which often are the way to work around those limitations. In this particular case, while :hover and :active pseudo-classes do not behave as we expect them to on all but one element, there are Internet Explorer Behaviors to add the desired functionality with little extra work

The scripting of the behavior goes into a separate .htc file which compliant browsers would not ever see:

IEFixes.htc

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</SCRIPT>

The behavior is attached to the desired elements using CSS declaration:

button, tr, td
  { behavior: url('IEFixes.htc');
  }

The .hover and .active classes to be used by IE are declared along with the :hover and :active pseudo-classes:

button:active, button.active 
  { /*Active styles here */}
button:hover, button.hover
  { /*Hover styles here */}

Examples that use hover and active styling