Pseudo classes in IE: Use of hover and bugs

: Hover is one of the most commonly used pseudo classes in CSS design. Many beautiful effects cannot be achieved without the pseudo class: hover, such as our common pure CSS menus and album effects.

It may take so long for a pseudo-class: hover, some friends do not fully understand the hover rules:

In css1, this pseudo class can only be used for object. This pseudo class does not work for a object without the href attribute (feature.

In css2, this pseudo class can be applied to any object.

However, ie5.5 and IE6 currently only support hover in css1, but the new IE7 supports hover in css2.

When we use the pseudo-class: hover to do some special effects, it works well according to css2, but we have to do a lot of work to occupy IE6 in mainstream browsers, for example, add element a to simulate the final effect.

For more information about space holes, see the following common trigger display example (only IE6 is used as an example ).

We first use css2 to implement the following:

XHTML section:

<Ul> <li> move the mouse over to trigger me! <A href = "#" Title = ""> Haha, you finally discovered it! </A> </LI> </ul>

CSS section:

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

We can test and find that in Firefox and other browsers with good support for css2, we can see what we want to achieve, but it cannot be achieved in IE6.

Let's change our mindset and use the css1 method to look at it. At this time, because it cannot support the use of the Li element: hover, We have to include all the text in, use hover for A and place the hidden parts to the span element. First, adjust the XHTML part as follows:

XHTML section:

<Ul> <li> <a href = "#" Title = ""> move the mouse over to trigger me! <Span> Haha, it was finally discovered by you </span> </a> </LI> </ul>

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

CSS section:

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

We can find that the results in the previous example are still not displayed in IE6. Is it because our code is wrong? Check to see if there are any errors, they will still answer you, and the code is completely correct.) Is it the standard description wrong? Or does the IE6 browser not support CSS 1? A lot of questions come from all directions ......

What is the problem?
It is not a standard error, nor does the IE browser not support css1, but the issue of IE browser's own parsing. It is a bug of the pseudo class: hover in ie5.5 and IE6.

So how can we solve this problem?
This bug can be eliminated by adding some special CSS attribute declarations to the Link Attributes.

Next we will conduct an experiment on the second example. What attributes can help us eliminate these bugs.

Add the following to the CSS code:

li a:hover {}

We only set width: 100px for its properties. We found that there was still no change in IE6. We tried to change the value of width, such as making width: 99px. A strange thing happened, in IE6, the hidden part is displayed when triggered. We can only set the color of the Li A: hover attribute for testing (the initial value is # fff). We can change the color value and find that the display cannot be triggered in IE6, which is strange and strange, strange ...... Is it still confused ...... It doesn't matter. Continue to the experiment. Maybe we can find the Rule After classification!

We can use other attributes for setting: 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 in addition to text-decoration, color, and Z-index, the display cannot be triggered. (For the display that cannot be triggered, you can also have some missing attributes. Please add them, other attributes can be used as specific attributes to eliminate pseudo-classes: hover bug.

Note:

1. Dispaly cannot be tested in this example. You can also write a simpler example (remove the position in uL/Li, A, and span ). In practice, Yunfei does not recommend changing the display value as a specific attribute to eliminate this bug. In some cases, this attribute may not be able to eliminate the bug.
2. We can also change the color in border and background as specific attributes by using full write and simple write, for example, # fff and # ffffff are resolved to two different values in bug elimination.