Whatever:hover does not need JavaScript to allow IE to support rich pseudo class _javascript techniques

This is cool because it gives you the special effects of applying mouse-over events (mouseover) to table rows (<tr>) only through CSS. However, the evil of IE, for: hover pseudo class at most only provides limited support, the degree of specific support depends on the specific version of your IE browser.

Whatever:hover is a small script that can quickly and automatically add standard: hover,: Active, and: Focus pseudo-class support for IE6,IE7,IE8. The third edition introduces Ajax support, meaning that any HTML element dynamically added to the document through JavaScript can also respond in IE: hover,: Active, and: Focus style.

If you are already skilled in using whatever:hover, now just want to download it, you can jump directly to get the latest version. For others who want to know more about it, please read on.

How to use

All you need to do is link the whatever:hover to the BODY element. Note that the URL in the Behavior property here is relative to the HTML file, not the path to the CSS file as the background image address.

URL ("CSSHOVER3.HTC"); }

Working principle

All browsers provide a way for you to use JavaScript query style sheets to define good rules or to insert new rules dynamically. Under normal circumstances, IE returns "Unknown" to all rules that it does not support. For example: A rule about "div p:first-child" will be changed to "Divp:unknown", and a rule about "P a[href]" will be returned as "unknown" as a whole. Luckily, IE put: the hover pseudo class is considered to be the style rule it supports, and will keep it intact.

IE also supports so-called behavior (behaviors), which includes not only predefined functions such as dynamic load content or persistent data storage, but also custom behavior that you can create in a file with a suffix of. htc or. hta. These behaviors are associated with HTML nodes through CSS implementations and "enhance" the nodes selected by the style selector in the specified behavior.

To sum up, create an action to find elements that are not supported by IE in the stylesheet, and use some other means to "trick" the elements so that they apply the styles associated in the style sheet. The steps contained in this complex operation can be described roughly as follows:

• Search all stylesheets for IE not supported: hover pseudo-class rules;
• Insert an IE-supported, such as a new rule with a class name;
• Finally, set the script event to toggle the class name of the target element.

In this way,: hover,: Active and: Focus can get (IE's) support. And as a developer, you don't have to do anything other than include this behavior. All the work will be done automatically.

Compared to versions 1th and 2nd, the 3rd version also supports dynamically added HTML (AJAX). Another change was that the original version 1th and 2nd used the active search for elements that were affected in the page load event, and in the 3rd edition the node itself was replaced with an expression (expressions). You can read the annotated version of this section for more details.

Example: Menu effects

: Hover a very common use is to create a menu system with a list. It's easy to create a two-level menu system with this behavior. For example, if you remove JavaScript from Suckerfish dropdown (a page with a drop-down menu, a description of the page and effect, see a List Apart article), it still works.

But multilevel menus need to be handled differently. This is because IE does not support the child selector ' > ', the child selector can perfectly display the Subordinate submenu, rather than displaying it together with a deeper menu.

/* Under IE Invalid * *}

There is an alternative way to simulate this behavior using only simple descendant selectors (mainly for IE). There is also a less mature way to apply multiple class definitions, but the simpler approach is to take advantage of the different precedence of the CSS selector (specificity). Each CSS rule has a specific level of importance that can be calculated simply by the different elements of a rule. With the element name as the base value "1″, class, Pseudo class, and attribute selector importance (weight) is" 10″, and then the element ID is 100″. Like the following example.

Display:none;
Display: Block;}

The reason that this can take effect is that the selector has a different priority. The first rule contains only two element names, so that its weight value (priority) is 2. The second rule also contains two element names, but: the weight value (priority) of the hover pseudo class is 10, so the value added is 12. Because the second rule takes precedence over the first rule, the UL inside the LI element that is slid over by the mouse will be displayed.

So how does this help solve the problem of > sub selectors? Yes, if a rule that has a weight value (priority) of 12 defines all the submenus to display, we just need to create a rule with a weight value (priority) greater than 12 to hide the next level of menus. Then, the menu needs another higher-priority rule to show that it's going to loop. For Level 3 navigation, the CSS code needed is surprisingly short:

/* 2 and 13 * *
Display:none;
/* 12 and 23*/
Display: Block;}

This way you can implement an infinite-level nested menu without attaching any class style (level 4 or more needs to continue adding more rules).

Performance optimization for script events

There's only one thing left to consider. The. htc file searches in all style sheet files: Hover rules, and appends the mouse over and out events to all elements that it deems necessary for scripting stay effects, as defined by the CSS file. To find out these (affected) elements, all of them are removed: The elements selected by the hover pseudo class and the elements that are modified by the hover pseudo class are selected and processed. A rule similar to this one

#menu li:hover ul {...}

... will be adjusted to look for all elements that may need to respond to the mouse-slipping event:

#menu li {...}

Obviously this will select each <li> element in the entire menu and attach events to one of the many elements that do not require mouse events (in the current case). This problem can be easily resolved by adding a class style, such as "folder", to the list element that contains the submenu. Thus, the style rule after adjusting (removing: hover) becomes

#menu Li.folder {...}

... You can efficiently and directly select the elements that really need the event. The disadvantage is to improve the performance of the script, you need to add a class style (the addition of this class style is purely for visual effect, and give up the li:hover way to achieve the universality of the menu). However, from another perspective, you may want to use a class anyway to distinguish these list elements from ordinary elements, which is irrelevant.

For an intuitive explanation of the above issues, see the consolidated example. I hope you like it.

File download and update description:

File Download:

Version 3.11 (: hover,: Active And:focus)
(: hover,: Active and: Focus)
Minified, 2.8K (right click & Save) | commented, 9.7K | Both, zipped

Version 1.42.060206 (: hover and:active) Download | View
Version 2.02.060206 (1.42 and:focus) Download | View

Description

Illustration 1: If you encounter problems in the process of using whatever:hover, please let me know! Because the 3rd edition is newer, there may be some unpredictable problems.

Illustration 2: Make sure your Web server sends HTC files in the Text/x-component MIME type. For more information on this, refer to Aldo's personal blog. If your host supports the. htaccess file, you can add the following line of code:

AddType text/x-component. HTC

Illustration 3: The third edition supports the use of the IE6 version: hover and: Active, IE7 and IE8 also support: Focus. Because the expression (expression) is not supported in IE8 Standard mode, whatever:hover only runs under the IE8 bizarre mode (Quirks mode). In fact, this script is not needed in the IE8 standard mode at all.

Illustration 4: If the page slows down after using this script, try using a more specific selector: hover pseudo classes, such as adding element names, using element IDs, or class names. For example: "Div#someid li.group:hover" instead of ". Group:hover". This reduces the search and parsing time to a large extent and reduces the events that need to be applied. Please read the performance optimization for more information.

Illustration 5: The 2nd edition also supports: Focus pseudo class, limited to A, INPUT, and textarea elements. However, because selectors such as "Input:focus" are returned by IE's style sheet objects as "Input:unknown", the script attaches the focus and loss-focused events based on these "UNKONWN" rules, which also exist in pseudo classes that other browsers do not recognize. Therefore, when you use version 2.0, you cannot apply a pseudo class in IE to a, input, and textarea elements that are not recognized by browsers, because they are all processed to get the focus style. If you really need this feature, please use version 1.4 or version 3.0.

On the Naar voren (a German web site for web development), I have a more detailed article (German version) on the use of pure CSS in the menu system in German. For those who do not know German, you can view the English translation of the article.

Thanks to Arnoud Berendsen and Martin reurings for their creativity and support, thank you to Robert Verkade and naar voren to publish my article, and thanks to Eric Meyer for supporting the script and Referring to my page in his book (referring to "Eric Meyer talking about CSS (Volume 2), chapter sixth"-Translator note).

Author: Peter Ned Original: Whatever:hover

Translator: Xiao Li Dao Start: whatever:hover– without JavaScript let IE support rich pseudo class

Reprint please indicate the source.
The above file, cloud-dwelling community package download address