Shulou(Shulou.com)06/03 Report--

How to solve the problem of pseudo-class hover failure under IE6? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

The first article:

In the mechanism of dealing with CSS, take the support for pseudo-class: hover, for example, IE7+ adds support for tags other than a, but under IE6: hover even the support for an is not so satisfactory. Sometimes in order to add some simple dynamic effects, we often use the help of hover, for example, we often make the mouse change the color of the text as we pass over the link.

The code is as follows:

A:hover {color:#F00;}

Change my color as the mouse passes over

It works in all browsers. If it were changed like this:

The code is as follows:

A:hover em {color:#F00;} change my color as the mouse passes over

You will find that nothing happens under IE6-, and the solution is to add another a:hover {} style, which can contain attributes such as zoom,padding,margin. As follows:

The code is as follows:

A:hover {zoom:1;} a:hover em {color:#F00;} change my color when the mouse passes over

Look at the return to normal effect, to think about what may be caused: hover failure. You can use zoom,display,padding and other properties to do this, so you wonder if it's because of haslayout. Well, that's probably it. But if you go on to test, you will find that no matter what attributes you write in a:hover {}, color, font-size, overflow (even non-existent attributes, such as xx:yyy), you can get it back to normal.

The second article:

Under ie6, if you set hover directly on the child tag span of a, but a:hover does not make any settings, the a:hover span {color:red;} of span will fail directly under ie6, but if you set a:hover {} on the parent tag an of span, the hover setting of span will be valid again. For example:

The code is as follows:

Need to set the content of hover a span {color:red;} a:hover span {color:blue;}

At this time, the setting of a:hover span is normal under other browsers, but there is no change under ie6, because ie6's interpretation of the a: host child tag is based on the hover setting of the parent tag. In other words, if you do not set any parent tag a:hover {}, ie6 will stop interpreting the child tag hover of a, and the a:hover setting under ie6 will become invalid. Solution: set a:hover {color:blue;} on the parent tag, in which the hover of the parent tag cannot be set arbitrarily as it is said on the Internet, let alone repeat all the attribute settings of the child tag. For example, css is set to:

The code is as follows:

A span {color:red;} a:hover {font-size:12px;} a:hover span {color:blue;}

Ok, your settings for span are now valid again.

This is the answer to the question about how to solve the failure of pseudo-hover under IE6. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.