jQuery hover()方法和jQuery toggle()方法是兩個合成事件，類似ready()方法，都屬于jQuery自定義的方法。下面來講解這兩個方法的屬性和如何使用。
一、hover()方法：語法結(jié)構(gòu)為： hover(enter,leave)。用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動到目標(biāo)元素上時，會觸發(fā)指定第1個函數(shù)(enter);當(dāng)移出這個元素時，會觸發(fā)第2個函數(shù)(leave)。
下面是一段示例代碼：
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
代碼運行后的效果與下面代碼運行后的效果是一樣的。當(dāng)光標(biāo)滑過“標(biāo)題”鏈接時，相應(yīng)的“內(nèi)容”將被顯示；當(dāng)光標(biāo)滑出“標(biāo)題”鏈接后，相應(yīng)的“內(nèi)容”則被隱藏。
$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").hide();
})
});
注意：CSS中有偽類選擇符，例如“:hover”，當(dāng)光標(biāo)懸停于元素上時，會改變元素的外觀。偽類選擇符可以用于任何元素。然而在IE 6瀏覽器中，偽類選擇符僅可用于超鏈接元素。對于其他元素，可以使用jQuery的hover()方法。
hover()方法準確來說是替代jQuery中的bind(“mouseenter”)和bind(“mouseleave”)，而不是替代bind(“mouseover”)和bind(“mouseout”)。因此當(dāng)需要觸發(fā)hover()方法的第2個函數(shù)時，需要用trigger(“mouseleave”)來觸發(fā)，而不是trigger(“mouseout”)。
二、toggle()方法：語法結(jié)構(gòu)為：toggle(fnl, fn2, …fnN)。主要用于模擬鼠標(biāo)連續(xù)單擊事件。第1次單擊元素，觸發(fā)指定的第1個函數(shù)(fn1)；當(dāng)再次單擊同一元素時，則觸發(fā)指定的第2個函數(shù)(fh2)；如果有更多函數(shù)，則依次觸發(fā)，直到最后一個。隨后的每次單擊都重復(fù)對這幾個函數(shù)的循環(huán)調(diào)用。
在前面的加強效果的例子中，使用了以下jQuery代碼：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
使用toggle()不僅獲得了相同效果，而且也簡化了代碼。
toggle()方法在jQuery中還有另外一個作用：切換元素的可見狀態(tài)。如果元素是可見的，單擊切換后則為隱藏；如果元素是隱藏的，單擊切換后則為可見的。因此上面的代碼還可以寫成如下代碼：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
})
為了能有更好的用戶體驗，現(xiàn)在需要在用戶單擊“標(biāo)題”鏈接后，不僅顯示“內(nèi)容”，而且高亮顯示“標(biāo)題”。代碼為：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight);
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
運行代碼后，如果“內(nèi)容”是顯示的，“標(biāo)題”則會高亮顯示：如果“內(nèi)容”是隱藏的，則不會高亮顯示“標(biāo)題”。
