Question

jQuery鼠标移动到子元素边缘也触发mouseout事件

jQuery鼠标移动到子元素边缘也触发mouseout事件，这会导致鼠标在元素上移动时，下拉框不停的闪

<div class="commodity-box">
<div class="box" style="z-index: 99;">
<div class="commodity-img">
<img src="zz.jpg" />
</div>
<div class="title">
<a href="#">标题标题</a>
</div>
<div class="pandb">
<em><b>¥</b>11</em>
<a href="#" class="buy">立即购买</a>
</div>
</div>
<div class="mmesg">ssss</div>
</div>
<script type="text/javascript">
$('.commodity-box').mouseover(function(){
$(this).css('z-index', '99');

var mmesg = $(this).find('.mmesg');
var height = $(this).height();
var mheight = mmesg.height();
var mm = height-mheight;

mmesg.css({'top': mm, 'display' : 'block'});
mmesg.stop().animate({'top' : height+"px"}, 100, 'linear');

});

$('.commodity-box').mouseout(function(){
var mmesg = $(this).find('.mmesg');
var height = $(this).height();
var mheight = mmesg.height();
var mm = height-mheight;
$(this).css('z-index', '0');
mmesg.stop().animate({'top' : mm+'px'}, 100, 'linear', function(){
$(this).css('display', 'none');
});
})
</script>

代码如上，求解释

Answer 1

看你的代码都没什么问题啊？？是不是你子元素的框架超出去了？？建议检查下样式表，还有不然使用firebug调试看看~~~