The solution to mouseEnter and mouseleave still flashing in IE6 under jQuery!

The expected effect of mouseenter under jQuery!

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=”starfish aquarium”></a>
<a href=”#”>Starfish Aquarium</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/2.jpg” width=”150″ height=”170″ alt=”filter”></a>
<a href=”#”>Filtering device</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/3.jpg” width=”150″ height=”170″ alt=”submersible pump/head”></a>
<a href=”#”> Submersible pump/head</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/4.jpg” width=”170″ height=”170″ alt=”illumination device”></a>
<a href=”#”>Lighting device</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/5.jpg” width=”150″ height=”170″ alt=”heat rod”></a>
<a href=”#”> heating rod</a>
</li>
<li>
<a href=”#”><img src=”http://www.lassaquarium.com/tpl/lassaquarium/images/product/product-category/6.jpg” width=”150″ height=”170″ alt=”air pump”></a>
<a href=”#”>Air pump</a>
</li>
</ul>
</section>

js code:

<script>
$(document).ready(function(){
$(“.product-category li:not(.hover)”).MouseEnter(function(){
// $(this).addClass(“hover”);
/* Solve the problem of flickering under 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 category */

.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:

Raw js code:

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

Modified to:

<script>
$(document).ready(function(){
$(“.product-category li:not(.hover)”).MouseEnter(function(){
// $(this).addClass(“hover”);
/* Solve the problem of flickering under 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>

Due to the problem of flickering when the operation class name is added under IE6, it still cannot be solved after several twists and turns, so it is best to directly operate the style effect, and finally no flicker!