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.
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.
发表评论
-
navigator h and v
2012-05-08 00:53 756菜单垂直 ul { padding: 0 ... -
css fix
2012-04-13 16:11 636come from http://www.webtoolkit ... -
CSS Note 1
2012-03-25 08:37 6551.对html,body设置background-color区 ... -
網頁設計師必備的顏色選擇器
2012-03-25 08:38 737作為網頁設計師,我們經常會瀏覽網站尋求靈感,很多時我們發 ... -
Reset css (add before all css codes)
2012-03-24 21:09 579<style type="text/css ...
相关推荐
what is seen and what is not seen 一部很不错的书。
what's newwhat's newwhat's newwhat's newwhat's newwhat's newwhat's newwhat's newwhat's new
What - If 分析法What - If 分析法
What Is Computer Science
英文版,介绍程序员必知的存储器知识,非常详细。
The net-zero transition-What it would cost, what it could bring.pdf
高中What's really green?课件设计.pptx
What - If 分析法What - If 分析法What - If 分析法
我们需要的技术——以更开阔的视角探索人与技术的关系
What is Nucleus C++ FILE? Nucleus C++ FILE is a C++ class interface into Nucleus FILE, a FAT16/FAT32 TM compatible file system specifically designed to work in embedded systems in conjunction with the...
What is Middleware.pdf E文的
What's New with vSphere 6 - Platform Whitepaper.pdf
ChatGPT研究资料,What Is ChatGPT Doing ... and Why Does It Work (Stephen Wolfram) (Z-Library)
What'simportantPPT教案.pptx
What’s Spring?What’s SprinWhat’s Spring?g?
What bugs in the cloud?A Study of 3000+ Issues in Cloud Systems
What is MATLAB_
Foundations of Security What Every Programmer Needs to Know .pdf 一本很不错的网络编程安全的入门书籍
what a good day of today what a good day of today