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

This article is about how to solve the problems of hover under IE6. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The problem of hover under IE6

IE always makes people vomit a lot of blood when it comes to the mechanism of dealing with CSS, but it is gratifying for them to improve now.

Take the support for the pseudo class: hover, for example, IE7+ has finally added support for tags other than a. We should applaud this improvement, of course, but under IE6,: hover even the support for an is not so satisfactory. Here's what I want to talk about briefly: the problem of hover in IE6 and earlier browsers.

Many people in ◆ may already know: some of hover's problems with IE6 and earlier browsers (hereinafter referred to as IE6-). I mainly want to talk about problems like a:hoverspan {}.

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. Such as:

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

Yes, this will work in all browsers. But if it were changed like this:

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

You will find that nothing happens under IE6- and our style is invalid. Yes, that's it. Many people should have encountered and solved this problem.

Yes, you only need to add another a:hover {} style to solve this problem, which can include attributes such as zoom,padding,margin. As follows:

A:hover {zoom:1;} a:hoverem {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.

Do you feel a little dumbfounded when the test comes here? Yeah, me, too. As for what the reason is, I don't know yet, maybe someone knows.

◆ A simple example of a:hover:

Run the code box

: hover's problem under IE6andearlier # navul {zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:#CCC;} # navli {float:left;width:100px;height:30px;line-height:30px;text-align:center;} # nava {color:#333;} # nava.en {display:none;} # nava:hover {display:block;background:#333;color:#CCC;} # nava:hover.en {display:inline } # nava:hover.cn {display:none;} Home Homepage News News Picture Picture download Download message Comment

[Ctrl+An all Select Tip: you can modify part of the code first, and then press run]

Although the example is simple, you will immediately find that the Chinese and English menus and some CSStips effects are also so simple.

Thank you for reading! This is the end of this article on "how to solve the problem of hover under IE6". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.