jQuery中的hover事件

在我們之前學習前端的過程中了解到了很多**的作用，特別是js中所使用的方法，我之前也介紹過很多實用的js方法，今天要給大家介紹的是jquery中的乙個比較特殊的乙個方法：hover()。

先前說過，我們在程式設計的時候最不想看到的結果是方法效果實現了，但是**量卻出乎意料的繁雜、量大，所以在寫**的時候通常會使用一些外掛程式或者是特殊方法盡量簡寫**，而jquery就是用於書寫方便，簡寫**的外掛程式。儘管使用外掛程式也會存在**重複的問題。

下面我用乙個例子進行講解：

上述內容是乙個簡單的布局，首先「contbox」元素盒子預設為隱藏狀態，我們想實現的效果是移入展開盒子的按鈕能夠將盒子顯示出來移出隱藏，同時滑鼠在盒子上時盒子也不會消失：

同時獲取到按鈕和盒子兩個元素的id給它們乙個滑鼠移入事件，當滑鼠移入進去後給盒子新增乙個顯示元素的類（不是這個類就能隱藏，這是使用css外掛程式後外掛程式內設定的屬性），再選擇到兩個元素的id給它們乙個滑鼠移出事件，當滑鼠移出之後去除掉這個顯示元素的類。

完成後執行實現效果，確實完成了之前所需要的操作結果，當滑鼠沒有移入的時候是這樣的，當滑鼠移入後則顯示出了盒子，同時滑鼠在盒子上時盒子依舊存在。

到這裡我們所需要的效果實現了，但是js**就感覺有點多了，雖然已經時簡寫過了，但看上去寫法比較簡單，直接通過事件實現的每乙個效果，應該還可以簡化，那麼這時候就可以用到今天所介紹的這個特殊方法了。

hover([over,]out)方法故名思意，就是乙個偽類，不過是乙個特殊的偽類，它可以同時實現移入移出的乙個方法，它本身包含了兩種方法，做出第乙個動作會觸發第乙個方法，第二個動作會實現第二個方法，雖然它僅僅只是移入移出，不過方法體卻是可以隨心所欲的寫（不踰矩）。

那麼下面我們將之前的那個js**轉換一下用hover()方法來寫，看一下所實現的效果是否和之前實現效果是一樣的：

選擇到兩個元素的id，給它們乙個hover事件，在事件內兩個方法中分別寫出所需實現的方法體即可。然後我們更改一下按鈕名字後再次執行，當滑鼠移入移出按鈕和在顯示後的盒子上時盒子效果依舊沒變：

所實現的效果與之前完全一樣，通過對比發現，使用hover()方法來實現的這個效果的**比傳統的移入移出方法實現效果的**要少一點，而且總體看上去邏輯思維比較清晰，沒有之前的那種繁雜的**樣式。