A: explanation of hover's bug solution in IE6

First look at the html section:

The code is as follows:	Copy code
<Li> <A href = ""> <Span class = "item_icon item_icon_11"> </span> Password prompt </A> </Li> <Li> <A href = ""> <Span class = "item_icon item_icon_12"> </span> </A> </Li>

Look at the css section again:

The code is as follows:	Copy code
A span. item_icon_11 {background-position:-1000px 0 ;} A span. item_icon_12 {background-position:-1100px 0 ;} A: hover span. item_icon_11 {background-position:-1000px-82px ;} A: hover span. item_icon_12 {background-position:-1100px-82px ;}

To achieve this, the background of span is changed when the mouse moves over the link. It is common in other browsers, but in IE6. When I move to the link, the background changes, but it disappears and becomes very slow after a while.

The reason is as follows:

The reason is that IE6 does not allow the attributes of a: hover to be the same as those of a: link. If there is no style change in a: hover, hover will not be triggered, therefore, you need to add an attribute to make the difference. No matter whether any attribute is written in a: hover, it can restore it to normal. The most common is a: hover {zoom: 1 ;}

The modified css section:

The code is as follows:	Copy code
. Aq_section ul li a: hover { Zoom: 1; }

Okay, let's add an article written by Taobao ude.

As shown in the figure above, when creating a page with a hot digital ranking, the images on each mobile phone are fixed at a size of 160x120. However, for the sake of beautiful pages and readability of content, on the list page, the images are compressed to 50% of the original size, that is, 80x60 pixels. However, when you move the mouse over the thumbnail, the image size is displayed. Similar effects are also applied to show the user's profile picture on the shrimps:

The technology used to capture shrimps is to register a mouseover event on each thumbnail using a hidden floating layer. When you move the mouse over the thumbnail, set the src attribute of the img element in the floating layer to the image URL of the Avatar. Then, use JavaScript to calculate the absolute position and display the enlarged avatar on the thumbnail.

In fact, if the image size is fixed, you don't need JavaScript. You only need pure CSS to achieve similar results. For example, in the ranking page of popular digital products, CSS is defined as follows:

The code is as follows:	Copy code
. DigitalImage { Position: relative; } . DigitalImage a: hover { Position: relative; Z-index: 1; Border: none; } . DigitalImage a img { Position: static; Width: 80px; Height: 60px; Border: none; } . DigitalImage a: hover img { Position: absolute; Z-index: 2; Width: 160px; Height: 120px; Border: 1px solid # CCC; Left:-40px; Top:-30px; }

The principle is very simple. Set the position attribute of element a to relative. The image size is displayed as 50% at the beginning, and the default position is used. When the hover is triggered, the image is changed to absolute positioning, the source image size is displayed at the same time. In order to make the effect look symmetric on the thumbnail, set top and left as the negative values of the width and height of the thumbnail.

What is confusing in the above CSS is roughly the rough oblique display.Border: noneOne sentence. This seems meaningless, but without this sentence, hover cannot be triggered in IE6.

I have never encountered a similar problem before. google knows that this is a Bug where IE6 handles CSS pseudo class: hover. For example, the following code:

The code is as follows:	Copy code
<Style> A {} A span {color: green ;} A: hover {} A: hover span {color: red ;} </Style> <A href = "http://www.111cn.net"> Taobao <span> taoyou like </span> </a>

In IE7/FF, when you move the mouse over the link, the word "Tao you like" turns red, but IE6 does not respond. Therefore, the IE6 bug is that if a and a: hover have the same css definition, that is, if a: hover does not have style changes, hover will not be triggered. However, if you add some specific attributes in a: hover {}, for example

The code is as follows:	Copy code
A: hover {border: none ;} Or A: hover {padding: 0 ;} Or A: hover {background: none ;}

In this case, hover can be triggered. Such attributes include direction/text-align/text-indent/float/overflow/position ...... And so on. I chose border: none on the top-selling page of digital products. For more information, see: