Monday, December 22nd, 2008
Peter Nederlof just released version 3 of whatever:hover, his library that makes sure that :hover works just fine for the IE browsers out there.
The new version is faster, better documented, uses a CSS trick with expressions in IE to trigger the hover events in IE and now has Ajax support! (this means that new items added to the DOM after loading will also be affected by whatever:hover.
How does it work?
IE also supports so called behaviors; both predefined functionality like dynamic content loading or persistent data storage, as well as custom behaviors that you can build into an .htc or .hta file. These behaviors are linked to html nodes via css, and “enhance” the nodes that are selected by a rule’s selector with the given behavior.
Combining the above, it should be possible to create a bahavior that searches the styles for rules IE doens’t support, and trick affected elements into applying the associated styles some other way. The steps involved in this are something like:
- Search all stylesheets for :hover rules IE doesn’t support,
- Insert a new rule IE does support, like one with class names,
- and finally, set up script events for switching class names.
This way, :hover, :active and :focus can be supported, and as a developer you don’t have to do anything except including the behavior. Everything else runs on full automatic.
Unlike versions 1 and 2, version 3 also supports dynamically added html (ajax). The difference is that 1 and 2 actively searched for affected elements onload of the page (so; only once), whereas 3 uses expressions to let nodes do a callback themselves. Read the commented version for more details on this.
(via Jelle Ursem)
Posted by Dion Almaer at 6:10 am