Whatever: hover-rich pseudo classes supported by IE without Javascript

ArticleDirectory

• Usage
• Working Principle
• Example: menu Effect
• File Download and update instructions:

Most modern browsers support the hover pseudo-class selector in CSS and can be used for all HTML elements. This is cool, because it allows you to apply the special effect of a mouse over an event (Mouseover) to a table row (<tr>) only through CSS. However, Internet Explorer only provides limited support for hover pseudo classes. The degree of 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 classes to IE6, IE7, and IE8. The third version introduces Ajax support, which means that any HTML elements dynamically added to the document through javascript can also respond to: hover,: active, and: Focus styles in IE.

If you are familiar with whatever: hover and want to download it now, you can directly jump to get the latest version. If you want to learn more about it, continue to read it.

Usage

You only need to link whatever: hover to the body element. Note that the URL in the behavior attribute is relative to the HTML file, rather than the path relative to the CSS file like the background image address.

Body{Behavior:URL ("csshover3.htc ");}
 

Working Principle

All browsers provide methods for you to use JavaScript to query rules defined in the style sheet or dynamically Insert new rules. Normally, ie returns "unknown" for all rules that it does not support ". For example, a rule about "Div P: First-Child" will be changed to "Div P: Unknown ", A rule about "p a [href]" will be returned as "unknown" as a whole. Fortunately, ie considers the hover pseudo class as the style rule it supports and keeps it as it is.

Internet Explorer also supports the so-called behaviors, including not only predefined functions such as dynamic loading of content or continuous data storage, but also a suffix. HTC or. the custom behavior created in the HTA file. These actions are associated with HTML nodes through CSS and "enhanced" these nodes selected by the style selector in the specified behavior.

To sum up, create an action to search for elements not supported by IE in the style sheet, and use some other means to "cheat" the elements that affect them to apply the associated style in the style sheet. The steps in this complex operation can be roughly described as follows:

• Search for hover pseudo-class rules not supported by IE in all style sheets;
• Insert a new rule supported by IE, such as a new rule with class name;
• Finally, set the script event to switch the class name of the target element.

In this way,: hover,: active, and: focus can be supported by IE. As a developer, you do not need to do anything except include this behavior. All work will be completed automatically.

Compared with version 1st and version 2nd, version 3rd also supports dynamic HTML (Ajax. Another change is that versions 1st and 2nd use the active search for the affected elements in the page loading event, while versions 3rd use the expression (expressions) make the node callback. For more information about this part, read the annotated version.

Example: menu Effect

A common purpose of hover is to create a menu system using a list. It is easy to create a two-level menu system using this behavior. For example, if you delete JavaScript from suckerfish dropdown (a webpage with a drop-down menu, for details about the page and effect, see a list apart Article, it still works normally.

However, multi-level menus must be processed differently. This is because IE does not support the sub-selection character '>'. The sub-selection character can perfectly display the sub-menu, rather than displaying the deeper menu together.

 
Li: hover> ul{/* Invalid in IE */}
 

There is a way to choose to simulate this behavior (mainly for IE) by using a simple descendant selector ). Another immature method is to apply multiple class definitions, but the simpler method is to use different priorities (specificity) of CSS selector ). each CSS rule has a specific importance level, which can be simply calculated based on different elements in a rule. Use the element name as the reference value "1". The importance (weight) of the class, pseudo class, and attribute selector is "10", and the element ID is "100 ″. For example, the following example.

Ul ul{Display:None;}Li: hover ul{Display:Block;}
 

The reason for this is that the priority of the separator is different. The first rule only contains two element names, so that its weight (priority) is 2. The second rule also contains two element names, but the weight (priority) of the hover pseudo-class is 10, so the total value is 12. Because the second rule takes precedence over the first rule, the UL inside the Li element that is slipped by the mouse will be displayed.

So what can this help solve> the problem of sub-Selector? Yes. If a rule with a weight value (priority) of 12 defines that all sub-menus should be displayed, we only need to create a weight value (priority) to hide the menu at the next level. Then, the menu needs another rule with a higher priority to display and keep repeating. For level 3 navigation, CSS is requiredCodeSurprisingly short:

/* 2 and 13 */Ul ul,Li: hover ul{Display:None;}/* 12 and 23 */Li: hover ul,Li: hover ul{Display:Block;}
 

In this way, you do not need to attach any class style to implement an infinitely nested menu (level 4 or more levels need to add more rules ).

Performance Optimization of script events

There is one more thing to consider now .. Search for HTC files in all style sheet files: hover rules, and attach the mouse over and out of all elements that it deems need to process the stay effect with a script according to the definition of the CSS file. To find out these (affected) elements,AllRemove: The elements selected by the hover pseudo class and the elements modified by the hover pseudo class will be selected and processed. A rule similar to this

 
# Menu Li: hover ul{...}
 

... It will be adjusted to the following to find all elements that may need to respond to the mouse over the event:

# Menu Li{...}
 

Obviously, this selects each <li> element in the entire menu and attaches events to a large number of elements that do not require mouse events (in the current situation. This problem can be easily solved. We can add a class style to the list elements that contain sub-menus, such as "folder ". In this way, the style rule after the adjustment (remove: hover) becomes

 
# Menu Li. Folder{...}
 

... You can efficiently and directly select elements that actually require events. The disadvantage is that to improve the script performance, you need to add a class style (this class style is purely for visual effects, and the Li: hover method is not used to achieve the versatility of menus ). However, from another perspective, you may also use a class to distinguish these list elements from common elements.

For an intuitive explanation of the above problems, see the comprehensive example. Hope you like it.

File Download and update instructions:

File Download:

V3.00.081222(: Hover,: active and: Focus)

Download (compressed, 2.5 k) | download (source code, 9 K) | View

V1.42.060206(: Hover and: active) download | View

V2.02.060206(: Hover,: active and: Focus) download | View

Note:

Note 1: If you encounter problems when using whatever: hover, please let me know! As version 3rd is relatively new, some unpredictable problems may occur.

NOTE 2: Make sure that your web server sends HTC files according to the text/X-component MIME type. For more information, see Aldo's personal blog. If your host supports the. htaccess file, you can add the following line of code:

 
Addtype text/X-component. HTC
 

Note 3: The third edition supports hover and: active in IE6 and later versions. For IE7 and IE8, focus is also supported. Because expressions are not supported in IE8 standard mode, whatever: hover only runs in IE8 quirks mode. In fact, this script is not required in IE8 standard mode.

Note 4: If the webpage slows down after the script is used, use the hover pseudo class for more specific selections, such as adding element names, using element IDs, or class names. For example, "Div # someid Li. GROUP: hover", instead of ". GROUP: hover ". In this way, the search and resolution time can be greatly reduced, and the events that need to be applied can be reduced. Read Performance Optimization for more information.

Note 5: Version 2nd also supports the focus pseudo class, which is limited to a, input, and textarea elements. However, because the selector similar to "input: Focus" is returned as "input: Unknown" by the style table object of IE ", the script attaches focus and focus loss events based on these "unkonwn" rules. This problem also exists in pseudo classes that cannot be recognized by other browsers. Therefore, when you use version 2.0, you cannot apply unrecognizable pseudo classes to elements a, input, and textarea in IE, because they are all processed as focal points. If you really need this feature, use version 1.4 or 3.0.

On naar voren (a German website about web development), I wrote an article about using pure CSS in the menu system: hover's more detailed article (German version ). If you do not know German, you can view the English translation of this article.

I am very grateful to mongoud berendsen and Martin reurings for their creativity and support, and to those friends on Robert Jan verkade and naar voren for posting my articles, I would also like to thank Eric Meyer for his support for this script and for mentioning this webpage in his book (referring to chapter 6 of Eric Meyer's CSS (Volume 2)-Translator's note ).

--------------------------

Author: Peter Ned Original: Whatever: hover

Translator: Xiao Li knife starter: Whatever: hover-rich pseudo classes supported by IE without Javascript

Indicate the source for reprinting.