在外贸购物网站的制作过程中，由于产品的分类 较多，因此在产品的列表页面和产品详细页面我们通常会将产品分类隐藏，在鼠标经过的时候就将分类显示出来。

首先需引入jQuery

<script  type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>

具体的样式可根据网站的实际情况来做调整！

正常效果：

鼠标经过时的效果：

下面这段代码是必不可少的：

<script type=”text/javascript”>

jQuery(function(){

$(“.lcacont > ul > li”).hover(function(){

$(this).addClass(“selected”);

$(this).children(“a:eq(0)”).addClass(“h2-tit”);

$(this).children(“ul”).show();

},function(){

$(this).removeClass(“selected”);

$(this).children(“.tit”).removeClass(“h2-tit”);

$(this).children(“ul”).hide();

})

})

(function(){

var $subblock = $(“#mlcate”), $head=$subblock.find(‘h2′), $ul = $(“#mlcate”), $ul1 = $(“#lcate”);

$head.mouseover(function(e){

$ul1.show();

});

$ul.mouseover(function(event){

event.stopPropagation();

});

$ul.mouseleave(function(e){

$ul1.hide();

});

})();

</script>