Solution for jQuery mouseenter and mouseleave Flickering in IE6

HTML code:

<section>
<ul>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/1.jpg” width=”230″ height=”170″ alt=”海星水族箱”></a>
<a href=”#”>海星水族箱</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/2.jpg” width=”150″ height=”170″ alt=”过滤装置”></a>
<a href=”#”>过滤装置</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/3.jpg” width=”150″ height=”170″ alt=”潜水泵/机头”></a>
<a href=”#”>潜水泵/机头</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/4.jpg” width=”170″ height=”170″ alt=”照明装置”></a>
<a href=”#”>照明装置</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/5.jpg” width=”150″ height=”170″ alt=”加热棒”></a>
<a href=”#”>加热棒</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/6.jpg” width=”150″ height=”170″ alt=”气泵”></a>
<a href=”#”>气泵</a>
</li>
</ul>
</section>

JS code:

<script>
$(document).ready(function(){
$(“.product-category li:not(.hover)”).mouseenter(function(){
// $(this).addClass(“hover”);
/* Solve the flickering issue in IE 6 */
$(this).css(“background”,”url(http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/hover-bg.png) center bottom no-repeat”);
$(this).find(“.category”).css({ background: “#303030”,color: “#FFF” });
}).mouseleave(function(){
// $(this).removeClass(“hover”);
$(this).css(“background”,”none”);
$(this).find(“.category”).css({ background: “none”,color: “#6C6C6C” });
});
});
</script>

CSS code:

/* Aquarium product categories */

.product-category {
width: 1000px;
height: 216px;
float: left;
border-top: 1px solid #C9C9C9;
padding-top: 20px;
}
.product-category ul {
width: 1000px;
height: 216px;
float: left;
background: url(http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/bg.png) left 171px repeat-x;
overflow: hidden;
}
.product-category li {
display: block;
float: left;
width: 150px;
height: 216px;
text-align: center;
overflow: hidden;
}
.product-category .hover {
background: url(http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/hover-bg.png) center bottom no-repeat;
}
.product-category img {
display: block;
width: 150px;
height: 170px;
}
.product-category .category {
display: inline-block;
margin-bottom: 15px;
height: 25px;
line-height: 25px;
text-align: center;
color: #6C6C6C;
font-family: “Microsoft Yahei”;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
margin-top: 6px;
}
.product-category a.category:hover,
.product-category .hover .category {
background-color: #303030;
color: #FFF;
}
.product-category .tank {
width: 230px;
}
.product-category .tank img {
width: 230px;
}
.product-category .lighting {
width: 170px;
}
.product-category .lighting img {
width: 170px;
}

The solution is as follows:

Original JS code:

<script>
$(document).ready(function(){
$(“.product-category li:not(.hover)”).mouseenter(function(){
$(this).addClass(“hover”);
}).mouseleave(function(){
$(this).removeClass(“hover”);
});
});
</script>

Change to:

<script>
$(document).ready(function(){
$(“.product-category li:not(.hover)”).mouseenter(function(){
// $(this).addClass(“hover”);
/* Solve the flickering issue in IE 6 */
$(this).css(“background”,”url(http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/hover-bg.png) center bottom no-repeat”);
$(this).find(“.category”).css({ background: “#303030”,color: “#FFF” });
}).mouseleave(function(){
// $(this).removeClass(“hover”);
$(this).css(“background”,”none”);
$(this).find(“.category”).css({ background: “none”,color: “#6C6C6C” });
});
});
</script>

Because adding class names caused a flickering issue in IE6, and I still could not resolve it after several attempts, I ultimately had to directly manipulate the style effects. Finally, the flickering is gone!