写了个模仿etao的商品分类代码,etao用的kissy,咱不会,用的jquery,基本上都实现了,但是在跨DIV时总是闪啊闪的,求高手给整理一下,怎么才能让它不闪,请给出代码,万分感谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<style>
*{ margin:0; padding:0;}
body{ margin:0; padding:0;}
body {FONT: 12px/1.5 'lucida grande',tahoma,arial,'bitstream vera sans',helvetica,sans-serif;}
img{ border:none;}
div {margin:0px;padding:0px;overflow:hidden;}
ul{margin:0px;padding:0px;}
li{list-style-type:none;}/*menu*/
.menubox {width:100%;height:34px;background-color:#bf0000;}
.menu {width:990px;margin:0 auto;}
.allclass {float:left;width:192px;height:34px;margin-left:1px;background:url(http://www.35926.com/images/menu_allclass.jpg) no-repeat;}
.menu li {float:left;width:70px;height:34px;line-height:40px;font-size:14px;color:#fff;text-align:center;}
.menu li.menu_selected {color:#bf0000;background:url(http://www.35926.com/images/menu_selected.jpg);}/*弹出全部商品类目 Start*/
.popclass {width:192px;height:360px;border:#bf0000 1px solid;border-top:none;position:absolute;z-index:150;display:none;}
.mainbox_allclass {width:188px;height:360px;border:#fff 1px solid;border-top:none;}
.item {width:188px;height:39px;background:url(http://www.35926.com/images/allclass_bg.jpg);}
.mc {width:176px;margin:0 auto;}
.item_name {width:188px;z-index:888;}
.item span {display:block;position:relative;width:176px;z-index:888;}
.item_name span.class_name {float:left;width:54px;margin-left:5px;height:38px;line-height:38px;font-size:12px;color:#333;font-weight:bold;z-index:999;}
.item_name span.b_name {float:left;width:110px;margin-left:10px;height:38px;line-height:38px;font-size:12px;color:#999;z-index:999;}.item_hover{border-bottom:1px solid #bf0000;border-top:1px solid #bf0000;border-left:1px solid #bf0000;width:188px;height:38px;background:#fff;cursor:pointer;}
.item_hover span{display:block;position:relative;width:176px;z-index:888;background-color:#fff;}.i_mc{position:fixed;height:430px;width:502px;border:1px solid #bf0000;background-color:#fff;padding-bottom:8px;overflow:hidden;top:34px;margin-left:170px;z-index:200;}
/*全部商品类目 End*/
</style>
</head><body>
<div class="menubox">
<div class="menu">
<div class="allclass" id="#allclass"></div>
        <li class="menu_selected" style="margin-left:15px;">首页</li>
    </div>
</div>
<!--全部商品类目 Start-->
<div class="popclass">
    <div class="mainbox_allclass">
        <div class="mc" id="_category_list">
<!--类目1-->
<div class="item">
<div class="item_name"><span class="class_name">服装服饰</span><span class="b_name">柒牌 LEE ONLY</span></div>
<div style="display:none;" class="i_mc">
</div><!--div i_mc-->
</div><!--div item-->
<!--类目2-->
<div class="item">
<div class="item_name"><span class="class_name">服装服饰</span><span class="b_name">柒牌 LEE ONLY</span></div>
<div style="display:none;" class="i_mc">
</div><!--div i_mc-->
</div><!--div item-->
</div><!--div mc-->
</div><!--div mainbox_allclass-->
</div><!--div mainbox_top_l-->
<!--全部商品类目 End-->
</body>
<script type="text/javascript"><!--
$(function(){
//当鼠标滑入时将div的class换成divOver
$('.allclass').hover(function(){
   var X=$(this).offset().top;//获取图片层左上角的横坐标
   var Y=$(this).offset().left;//获取图片层左上角的纵坐标
   var pop_X=X+34;//修正POP层距上的距离
   var pop_Y=Y-1;//修正POP层距左的距离
$('.popclass').css({"left":pop_Y,"top":pop_X}).show();
},function(){
//鼠标离开时移除divOver样式
$('.popclass').hide();
});
$('.popclass').hover(function(){
$('.popclass').show();
},function(){
$('.popclass').hide();
});
});jQuery("#_category_list > div.item").each(function(){
var d = jQuery(this);
d.mouseover(function(){
d.attr("class", "item_hover");
d.children("div.i_mc").show();
});
d.mouseout(function(){
d.attr("class", "item");
d.children("div.i_mc").hide();
});
});
--></script>
</html>