what ever hover(ie6)

Whatever:hover 3.11
Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows <tr> using only CSS. IE however, has an erratic support for :hover at best, depending on the particular version your visitor is using.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.

If you're already familiar with whatever:hover and just want to download it, scroll down and grab the latest version. For some in depth stuff on the other hand, just continue reading.

Getting it to work How do I use it?
Link whatever:hover to the body element, and you're all set. Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.


body {
   behavior: url("csshover3.htc");
}
IE only behaviours How does it work?
All browsers provide some way to look at a stylesheet's rules using javascript, and dynamically insert new rules. Normally, IE returns "unknown" for anything it does not support, for instance; a "div p:first-child" would change into "div p:unknown", and a "p a[href]" would be returned as "UNKNOWN" altogether. Fortunately IE recognizes :hover as something it's familiar with, and leaves it alone.

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.

for a menu An example of :hover
A common use for :hover is creating menusystems using lists. A dual level menusystem is almost too easy to create using this behavior. For instance, if you would remove the javascript from the suckerfish dropdown, described in the A list apart article and add this behavior to the body, it will work.

Multiple level menus require a different approach though. This is because IE lacks support for the > child selector, which would be perfect to show direct submenus, and not yet the deeper nested ones:


li:hover > ul {
   /* no go in IE */
}
There is an alternative way to simulate this, using simple descendant selectors only. A previously described method was based on the use of extra classnames, but an easier way is to use the specificity of CSS. Every CSS rule has a certain importance, which can be determined by simply counting the different elements of a rule. Nodenames count as "1", class, pseuo-class and attribute selectors count as "10", and ids as "100". Take the example below.


ul ul {
   display:none;
}

li:hover ul {
   display:block;
}
The reason that this works, is because of the specificity. The first rule contains only 2 nodenames, which makes its value 2. The second also contains 2 nodenames, but the :hover pseudo class is worth 10, so the combined value of the rule is 12. Because 12 exceeds 2, a hover on the li will show the ul (or rather all of them) nested within.

So how does this help getting around the > child selector? Well, if a rule of 12 would show all submenu's, all we would have to do is make a rule that is worth more than 12 to hide the next menus. Subsequently, that menu would have to be shown by another rule, again worth even more, and so on. For 3 levels of navigation, the CSS code is surprisingly short:


/* 2 and 13 */
ul ul, li:hover ul ul {
   display:none;
}

/* 12 and 23*/
li:hover ul, li:hover li:hover ul {
   display:block;
}
This way (and adding more for 4 or more levels) unlimited nesting of menu's can be used, without ever needing extra classnames.

script events mayhem Optimizing
There is just one more thing to consider. The .htc file searches the stylesheet for :hover rules, and attaches a mouseover and mouseout event to elements that in its opinion require a scripted hover effect to work as the css file says. To find those elements, everything after (and including) the :hover is trimmed from the selector, and the resulting elements are selected and processed. A rule like:


#menu li:hover ul {
   ...
}
... would be trimmed back to this to find all the elements that might need hover events:


#menu li {
   ...
}
Obviously this would select every single <li> element in the entire menu, attaching events to heaps of elements that don't necessarily need them (in this case). This could easily be addressed by a classname only for list-items that contain submenus, for instance "folder". In that case the trimmed line would read:


#menu li.folder {
   ...
}
... effectively selecting only those elements that actually need events. The downside is that you'd be using a classname to get the best performance from the script (disregarding menu-wide li:hovers for purely visual effects), on the other hand you might have used a class anyway to tell these list-items apart from normal items.

To illustrate all this; take a look at the combined example. Enjoy.