On the use and bug of Pseudo-class hover in IE

This article mainly introduces the use of pseudo-class hover in IE and the bug, has a certain reference value, now share to everyone, the need for friends can refer to

IE in the use of pseudo-class hover and bugs, the need for friends can refer to the next.

Pseudo-Class: hover rules:
In CSS1, this pseudo-class is available only for the A object. And for a object without href attribute, this pseudo-class does not take effect;
In CSS2, this pseudo-class can be applied to any object;
Currently IE5.5, IE6 only support CSS1 in: hover, but the new IE7 and Firefox support CSS2: hover.
First use the CSS2 to achieve:

Tip: You can modify some of the code before running


 You can test the discovery in Firefox and other CSS2 support Good browser, can show the effect we want to achieve, but in the IE6 is not possible. 
 Let's take a different kind of thinking, and use CSS1 's notation to see: 
 in CSS1, because the LI element cannot be supported: hover use, so the text is included in a, for a use: hover, and will show the hidden parts into the span element; 
 CSS we set a to block-level elements, and the size and width of a is the same as Li, 
 and set A to the relative position, with a to simulate the previous example of Li; 
 and use span to simulate a in the previous example, set span to be hidden by default (Display:none;); 
 When A is triggered (: hover), the span is displayed (display:block;); 
 However, if you modify the method as described above, the effect of the example will still not appear in IE6. 
 The reason is: ie browser itself resolves the problem, is IE5.5 and IE6 pseudo-class: hover bug. 
 How do I solve this problem? 
 This bug can be eliminated by adding some special CSS attribute declarations to the linked properties. 
 Li A:hover {} 
 has only set width:100px for its properties, and we have found that there is still no change in IE6, and we are trying to change the value of width, such as making it width:99px, strange things happen, in IE6, The hidden parts show up at the time of the trigger. We then test the properties of Li A:hover only by setting color (the initial value is #fff), changing the color value and discovering that the display cannot be triggered under IE6 ... The 
 concludes by summing up the discovery that other properties can be used to eliminate pseudo-classes, except that Text-decoration,color,z-index cannot trigger the display (for parts that cannot trigger the display, there are some missing attributes): The specific properties of the hover bug. 
 Description: 
 1, it is not recommended to change the display value to eliminate this bug for a specific attribute, and in some cases this attribute may not eliminate the bug. 
 2, for the color of border and background as a specific attribute we can also use full write and shorthand to change, such as #fff and #ffffff in the elimination of bugs resolved to 2 different values. 
 CSS1 The final effect: 
 


Tip: You can modify some of the code before running

Minimum code implementation version (Xugang implementation):


Tip: You can modify some of the code before running

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!