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,背景色变为红色,并在一秒钟内缓慢执行;当鼠标离开时则恢复原始状态。