Hover and Active in IE CSS Specification

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()" />

function DoHover()
  { element.className += ' hover';
}

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

function RestoreHover()
{ element.className = element.className.replace(/bhoverb/,”);
}

function RestoreActive()
{ element.className = element.className.replace(/bactiveb/,”);
}

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

Button

Table
Column 1 Column 2 Column 3
Cell 1:1 Cell 1:2 Cell 1:3
Cell 2:1 Cell 2:2 Cell 2:3
Cell 3:1 Cell 3:2 Cell 3:3
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s