快捷導(dǎo)航

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

更新時(shí)間：2016年12月03日 15:54:30 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談jQuery hover(over, out)事件函數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦

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="/"]');

以上這篇淺談jQuery hover(over, out)事件函數(shù)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于jquery實(shí)現(xiàn)的可編輯下拉框?qū)崿F(xiàn)代碼
昨天看到QQ登錄的時(shí)候，可以選擇以前登錄過(guò)的賬戶，這個(gè)東西也可以在網(wǎng)站登錄的時(shí)候用到，所以我就想做一個(gè)這樣的插件；在網(wǎng)上查了很多，沒(méi)有找到合適自己的，所以決定自動(dòng)制作一個(gè)
2014-08-08
jquery $.ajax各個(gè)事件執(zhí)行順序
jquery中各個(gè)事件執(zhí)行順序如下,使用jquery $.ajax的朋友可以參考下。
2010-10-10
jQuery實(shí)現(xiàn)的超酷蘋(píng)果風(fēng)格圖標(biāo)滑出菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超酷蘋(píng)果風(fēng)格圖標(biāo)滑出菜單效果代碼,涉及jQuery基于鼠標(biāo)hover事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常美觀實(shí)用,需要的朋友可以參考下
2015-09-09
jquery 圖片上傳按比例預(yù)覽插件集合
上傳的時(shí)候可以生成固定寬高范圍內(nèi)的等比例縮放圖的代碼，需要的朋友可以參考下。
2011-05-05
jQuery實(shí)現(xiàn)兩個(gè)select控件的互移操作
本文主要介紹了利用jQuery實(shí)現(xiàn)兩個(gè)<select>控件的互移操作的方法代碼，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
jQuery隨手筆記之常用的jQuery操作DOM事件
Dom是Document Object Model的縮寫(xiě)，意思是文檔對(duì)象模型。DOM是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口，使用該接口可以輕松訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件，本文給大家介紹jQuery隨手筆記之常用的jQuery操作DOM事件，需要的朋友參考下
2015-11-11
jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍
jquery滑塊（slider）允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)沿著軌道移動(dòng)滑塊控件時(shí)，將顯示一個(gè)表示當(dāng)前值的提示框，用戶可通過(guò)設(shè)置它的屬性來(lái)自定義滑塊。
2015-04-04
jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡(jiǎn)單多行滾屏效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡(jiǎn)單多行滾屏效果代碼,涉及jquery鼠標(biāo)事件控制頁(yè)面翻頁(yè)滾動(dòng)效果的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jquery插件ContextMenu設(shè)置右鍵菜單
這篇文章主要介紹了jquery插件ContextMenu設(shè)置右鍵菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效
Bootstrap Star Rating是一個(gè)簡(jiǎn)單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級(jí)分?jǐn)?shù)評(píng)級(jí)。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點(diǎn)開(kāi)發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下，但它可以覆蓋與其他任何CSS的標(biāo)記。
2015-04-04