A:hover bugs in IE6

As pictured above, in the production of digital best-selling pages, each cell phone picture is fixed 160x120 size, but for the sake of the page beautiful and content readability, the picture on the list page compressed to the original size of 50% display, that is, 80x60 pixel size. However, when the user moves the mouse over the thumbnail, we will display the size of the original image. Similar effects are also applied to the display of a user's head in shrimp catches:

The technique used to catch shrimp is to use a hidden floating layer, which registers the MouseOver event on each thumbnail, and when the mouse moves to the thumbnail, sets the src attribute of the IMG element in the floating layer as the picture URL of the avatar, and then calculates the absolute positioning through JavaScript, The enlarged avatar is displayed on the thumbnail.

In fact, if the size of the picture is fixed, no JavaScript is required, and a pure CSS is required to achieve a similar effect. In the case of digital products, the definition of CSS is roughly as follows:

. Digitalimage a {
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 property of a element is relative, the picture starts to display as 50% size, uses the default localization; When: hover is triggered, the picture changes to absolute positioning, and displays as the original size, in order to make the effect look like a symmetrical cover on the thumbnail, Set both top and left as a half of the width of the thumbnail for a negative number.

The above CSS more puzzling is probably the coarse oblique display of the border:none sentence. This looks like a meaningless effect, but without this sentence, in the IE6 can not trigger hover.

Never encountered a similar problem before, Google, just know that this is IE6 processing CSS pseudo class: hover bug. For example, the following code:

<style>
a {}
A span {color:green;}
a:hover {}
A:hover span {color:red}
</style>
<a href= "http://www.taobao.com" > Taobao <span> Amoy you like </span></a>

In Ie7/ff, when the mouse moves to the link, the word "Amoy you like" will change to red, but the IE6 is unresponsive. So the IE6 bug is that if a is the same as the CSS definition of a:hover, that is, if there is no style change in a:hover, hover will not be triggered. But if you add some specific attributes to the a:hover{}, such as

A:hover{border:none;}
Or
a:hover{padding:0;}
Or
A:hover{background:none;}

At this point the hover can be triggered. This property also includes direction/text-align/text-indent/float/overflow/position ... Wait a minute. I am in the Digital product best-selling list page is the choice uses the Border:none. For more detailed information please refer to:

• IE Pure CSS Pop Ups Bug
• Pseudo class in IE: use of hover and bugs

In addition, through reading Position:relative/absolute can not break the level, found that there is room for improvement of CSS, after the changes are as follows:

. Digitalimage A:hover {
position:relative;
}
. Digitalimage a img {
position:static;
width:80px;
height:60px;
Border:none;
}
. Digitalimage a:hover img {
Position:absolute;
width:160px;
height:120px;
border:1px solid #CCC;
Left: -40px;
Top: -30px;
}

The principle of the change is to remove the a style definition, directly define a:hover. This avoids the IE6 hover bug (position is also a property that triggers the display) and avoids the z-index problem mentioned in the Position:relative/absolute level, so you'll find that the improved style , the Z-index attribute was also removed.