淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery的hover事件提供了一种方便的方式来处理鼠标进入或离开某个元素的事件。该事件等价于mouseenter和mouseleave事件的组合,即当鼠标进入时触发mouseenter事件,当鼠标离开时触发mouseleave事件。

$(selector).hover(function(){
// 鼠标进入时要执行的代码
}, function(){
// 鼠标离开时要执行的代码
});

hover事件需要两个参数,第一个参数是当鼠标进入时要执行的函数,第二个参数是当鼠标离开时要执行的函数。可以看出,hover事件与普通的jQuery事件绑定方法是类似的。

需要注意的是,当使用hover事件时,如果只传入一个函数参数,那么该函数会同时处理mouseenter和mouseleave事件,等价于使用mouseenter事件。因此,在使用hover事件时一定要注意传入两个函数参数。

$(selector).hover(function(){
// 只处理mouseenter事件
});
$(selector).mouseenter(function(){
// 只处理mouseenter事件
});

另外一个值得注意的是,hover事件经常与jQuery的动画效果一起使用,可以使页面更加生动。例如,当鼠标进入某个元素时,让该元素缓慢变大并改变背景色,当鼠标离开时,让该元素缓慢恢复原始大小和背景色。

$(selector).hover(function(){
$(this).animate({
width: "200px",
height: "200px",
backgroundColor: "#ff0000"
}, "slow");
}, function(){
$(this).animate({
width: "100px",
height: "100px",
backgroundColor: "#fff"
}, "slow");
});

以上代码可以实现当鼠标进入时,将元素的宽高变为200px,背景色变为红色,并在一秒钟内缓慢执行;当鼠标离开时则恢复原始状态。