摘要：下面小編就為大家?guī)?lái)一篇淺談jQuery hover(over, out)事件函數(shù)。hover(over, out)事件函數(shù)當(dāng)鼠標(biāo)移動(dòng)一個(gè)匹配的元素上面，會(huì)觸發(fā)指定的第一個(gè)函數(shù)當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)over(function):鼠標(biāo)移到元素上觸發(fā)的函數(shù)out(function):鼠標(biāo)移出元素觸發(fā)的函數(shù)<nav class="main-nav"

下面小編就為大家?guī)?lái)一篇淺談jQuery hover(over, out)事件函數(shù)。

hover(over, out)事件函數(shù)

當(dāng)鼠標(biāo)移動(dòng)一個(gè)匹配的元素上面，會(huì)觸發(fā)指定的第一個(gè)函數(shù)

當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)

over(function):鼠標(biāo)移到元素上觸發(fā)的函數(shù)

out(function):鼠標(biāo)移出元素觸發(fā)的函數(shù)

<nav class="main-nav">
  <a href="/"><span>首頁(yè)</span></a>
  <a href="/about"><span>關(guān)于考試</span></a>
  <a href="/exam"><span>報(bào)考指南</span></a>
  <a href="/news"><span>考試情報(bào)</span></a>
  <a href="/career"><span>考試與就業(yè)</span></a>
  <a class="omega" href="/sitemap"><span>網(wǎng)站地圖</span></a>
</nav>
<script>
$(function(){
    //鼠標(biāo)移到與移出，移到元素時(shí)，添加當(dāng)前元素樣式，并且去掉當(dāng)前頁(yè)面的樣式。鼠標(biāo)移出時(shí)，去掉當(dāng)前元素的樣式，并且添加當(dāng)前頁(yè)面的樣式
  $('.main-nav').find('a').hover(
    function(){$(this).addClass('cur');$('.main-nav').find('a[href="<?php echo "/".$path[1];?>"]').removeClass('cur');},
    function(){$(this).removeClass('cur');$('.main-nav').find('a[href="<?php echo "/".$path[1];?>"]').addClass('cur');}
  );
  $('.main-nav').find('a[href="<?php echo "/".$path[1];?>"]').addClass('cur'); //加載頁(yè)面時(shí)就添加樣式
});
</script>

獲取<a href="/"></a>這個(gè)元素

$(".main-nav").find('a[href="/"]');

更多關(guān)于jQuery hover(over, out)事件函數(shù)請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其它文章！