在之前的學習，我們知道，鼠標移入和鼠標移出這2個事件往往都是同時使用的，因此我們必須分別對“鼠標移入”和“鼠標移出”這2個事件分別定義。但是在jQuery中，我們可以使用hover()方法一次性地定義這2個事件，這就是所謂的合成事件。
語法：
$().hover(fn1,fn2)
說明：
參數fn1表示“鼠標移入”時觸發的事件處理函數，參數fn2表示“鼠標移出”時觸發的事件處理函數。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper
{
display:inline-block;
width:300px;
}
*{padding:0;margin:0;}
h3
{
height:40px;
line-height:40px;
border:1px solid gray;
border-bottom:none;
background-color:Silver;
text-align:center;
cursor:pointer;
}
#content
{
padding:10px;
border:1px solid gray;
text-indent:30px;
display:none;/*設置默認情況下內容不顯示*/
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").hover(function () {
$("#content").css("display","block");
}, function () {
$("#content").css("display", "none");
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3> 學習網</h3>
<div id="content"> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人嘔心瀝血在一遍一遍地編輯，為的是給廣大網站愛好者提供最精華的知識。</div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
當鼠標移動到標題上面時，預覽效果如下：
分析：
在CSS偽類選擇器中，我們可以使用:hover偽類來定義鼠標移入移出某個元素時的CSS樣式的改變，但是這只限於CSS樣式改變，像上面這個例子那種操作就不能實現了。
hover()方法，准確來說是替代jQuery中的mouseenter()和mouseleave()，而不是替代mouseover()和mouseout()。
初學jQuery的朋友們對於hover()這種寫法感覺很陌生，有時候也記不住。其實hover()這個方法，無非就是插入了2個function函數罷了。我們每次使用合成事件的時候，先把形式寫出來，如下：
$("#wrapper").hover(function () { }, function () { })
然後再編寫兩個function(){}中的內容，這樣就不會導致書寫錯誤了：
$("#wrapper").hover(function () {
//第1個function的內容
}, function () {
//第2個function的內容
})
此外，我們還會看到有些書或者教程講解合成事件時提到，除了hover()之外還有一個toggle()。其實在新版本的jQuery中，toggle()用於合成事件的做法已經被移除了。當然，toggle()還被保留下來，用於切換元素的顯示狀態。我們在“jQuery顯示和隱藏”這一節會詳細給大家講解。