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,背景色變為紅色,并在一秒鐘內緩慢執行;當鼠標離開時則恢復原始狀態。