CSS pseudo-class: hover's use in IE and its BUG

Author: Blank Xiaofei
Pseudo Class: 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:

The code is as follows:

Copy code

<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 ;}

Css

The code is as follows:	Copy code
Ul {list-style: none ;} 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 ;}

Effects made using CSS2
Move the mouse to trigger me! Haha, you finally discovered it!

[You can modify some code before running it to view the effect]
We can test and find that in browsers with good support for CSS2 such as FF, we can see what we want to achieve, but it cannot be achieved in IE6.