专题模板中,有一处要求鼠标悬停到图片上时,从下往上划出介绍文字,
最开始采用了mouseover和mouseout,结果发现会产生一个bug:介绍文字出现后,鼠标就相当于mouseover到了介绍文字上,而离开了本来的图片,此时介绍文字又会消失。
直接用hover()事件可以解决这个问题:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
$(".imglist").find("li").hover(
function(){$(this).find(".imgdesc").animate({"margin-top":"-=150"},"slow");},function(){$(this).find(".imgdesc").animate({"margin-top":"+=150"},"slow");}
);