Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to use hover pseudo-class in CSS, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, hope you can get something after reading this article, let's take a look at it.

CSS pseudo class: the use of hover in IE and its BUG

Pseudo-classes: hover is one of the most commonly used pseudo-classes in CSS design. Many gorgeous effects can not be achieved without pseudo-classes: hover, such as our common pure CSS menus, photo album effects, and so on. Maybe the pseudo-class that has been used for so long: hover, and some friends still don't fully understand the rules of hover:

◆ this pseudo-class is only available for an objects in CSS1. And this pseudo-class has no effect on an object without a href attribute (attribute).

◆ this pseudo-class can be applied to any object in CSS2.

However, IE5.5 and IE6 only support: hover in CSS1, but the new IE7 supports: hover in CSS2.

When we use pseudo-class: hover to do some special effects, it is easy to do according to CSS2, but for IE6, which now occupies the mainstream browser, we have to do a lot of work, such as adding an element to simulate the final effect.

If you talk about space holes in this way, please take a look at the following example of a common trigger display (only choose IE6 as an example).

Let's first use the CSS2 writing method to achieve:

XHTML section:

ExampleSourceCode

Move the mouse over and trigger me! Haha, you finally found out!

CSS section:

ExampleSourceCode

* {margin:0;padding:0;} ul {list-style:none;margin:100px;} li {height:100px;width:100px;background:#000; font-size:12px;color:#fff;position:relative;} lia {display:none;} li:hovera {display:block; text-decoration:none;width:100px;height:100px; background:#c00;position:absolute;top:50px;left:50px;color:#fff;}

◆ view effect:

SourceCodetoRun

Css ul {list-style:none;} li {height:100px;width:100px;background:#000; font-size:12px;color:#fff;position:relative;} lia {display:none;} li:hovera {display:block;text-decoration:none;width:100px;height:100px;background:#c00; position:absolute;top:50px;left:50px;color:#fff;} use the effect of CSS2 to mouse over and trigger me! Haha, you finally found out!

[you can modify part of the code before running to view the effect]

◆ everyone can test and find that in browsers such as FF that support CSS2 well, they can show the effect we want to achieve, but it can not be achieved in IE6.

Let's think differently and look at the way CSS1 is written. At this time, because we can't support the use of li element: hover, we have to include all the text in a, use: hover for a, and put the part that will be shown and hidden into the span element. First, we make some adjustments to XHTML as follows:

XHTML section:

ExampleSourceCode

Move the mouse over and trigger me! Haha, you finally found out.

In CSS, we set an as a block-level element, make the size and width of a the same as that of li, and set an as the relative position, use a to simulate the li; in the above example and use span to simulate the an in the previous example, set span to hide by default (display:none;), and when an is triggered (: hover), the span display (display:block;)

CSS section:

ExampleSourceCode

* {margin:0;padding:0;} ul {list-style:none;margin:100px;} li {height:100px;width:100px;background:#000;font-size:12px;} lia {display:block;height:100px;width:100px; position:relative;color:#fff;text-decoration:none;} lispan {display:none;} lia:hoverspan {display:block;width:100px;height:100px; background:#c00;position:absolute;top:50px;left:50px;color:#fff;}

◆ view effect:

SourceCodetoRun

Css ul {list-style:none;} li {height:100px;width:100px;background:#000;font-size:12px;} lia {display:block;height:100px;width:100px;position:relative; color:#fff;text-decoration:none;} lispan {display:none;} lia:hoverspan {display:block;width:100px;height:100px;background:#c00; position:absolute;top:50px;left:50px;color:#fff } use the effects made by CSS1 (with BUG) to move the mouse over and trigger me! Haha, you finally found out.

[you can modify part of the code before running to view the effect]

But we find that the effect in the above example still cannot be displayed in IE6. Is it possible that our code is wrong and can be checked to check that there is no error at all (if you ask a master, they will still answer you, the code is completely correct), is the description in the standard wrong? Or do IE6 browsers not even support CSS1?

So what's the problem?

It's not the fault of the standard specification, it's not that IE browsers don't support CSS1, but it's the parsing of IE browsers themselves, and it's the pseudo-class in IE5.5 and IE6: hover's BUG.

So how to solve this problem?

The ◆ BUG can be eliminated by adding some special CSS attribute declarations to the properties of the link. Let's experiment with the second example above to see which attributes can help us eliminate these BUG.

For CSS code, we added:

Lia:hover {}

We only set width:100px; for its properties and found that there was still no change in IE6. We tried to change the value of width, such as making it width:99px, and something strange happened, and in IE6, the hidden part was shown when it was triggered. We only set color on the property of lia:hover to test (the initial value is # fff), change the color value, and find that the display can not be triggered under IE6. Is it still a mystery... It doesn't matter, go on with the experiment, maybe classify it and we can find the pattern!

Let's set it with another property: width,positon,background,text-decoration,font-size,font-weight,font-family,border,float,display,font-style,margin,padding,text-align,overflow,text-transform,text-indent,z-index,vertical-align.

We found that except that text-decoration,color,z-index cannot trigger the display (for those parts that cannot be triggered, there can be some missing attributes, friends are welcome to add), other attributes can be used to eliminate pseudo-classes: specific attributes of hoverBUG.

Description:

1. This example cannot be used to test dispaly, but write a simpler example (remove position in ul/li,an and span). In practical applications, it is not recommended to change the display value to eliminate this BUG as a specific property, and in some cases this property does not necessarily eliminate BUG.

2. We can also change the colors in border and background as specific attributes with full abbreviations and abbreviations, such as # fff and # ffffff are resolved to 2 different values in elimination BUG.

Final effect of ◆:

SourceCodetoRun

Css ul {list-style:none;} li {height:100px;width:100px;background:#000;font-size:12px;} lia {display:block;height:100px;width:100px; position:relative;color:#fff;text-decoration:none;} lia:hover {background:#ccc;} lispan {display:none;} lia:hoverspan {display:block;width:100px;height:100px; background:#c00;position:absolute;top:50px;left:50px;color:#fff } use the effect of CSS1 (no BUG) to move the mouse over and trigger me! Haha, you finally found that the above is all the content of this article "how to use hover pseudo-classes in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.