基于jQuery創(chuàng)建鼠標懸停效果的方法
更新時間：2015年03月07日 16:43:25 作者：老槍
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標懸停效果的方法,實例分析了jQuery實現(xiàn)鼠標特效的原理與詳細步驟,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了基于jQuery創(chuàng)建鼠標懸停效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
1. 創(chuàng)建HTML：
<ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul>
2. 選擇.mainnav的class：
$(".mainnav").hover(
function () {
},
function () {
}
);
3. 建立變量imgPath，指定圖片SRC：
$(".mainnav").hover(
function () {
// Grab the source
var imgPath = $(this).attr("src");
},
function () {
// Grab the source
var imgPath = $(this).attr("src");
}
);
4. 找到字符串off，用on替換：
$(".mainnav").hover(
function () {
// Grab the source
var imgPath = $(this).attr("src");
// Replace the path in the source
$(this).attr("src",imgPath.replace("off", "on"));
},
function () {
// Grab the source
var imgPath = $(this).attr("src");
// Replace the path in the source
$(this).attr("src",imgPath.replace("on", "off"));
}
);
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
基于jquery實現(xiàn)一個滾動的分步注冊向?qū)?附源碼
使用jQuery實現(xiàn)很多很有意思的應(yīng)用效果。我們在很多網(wǎng)站注冊會員時，需要填寫注冊表單，包括登錄信息、個人聯(lián)系信息等，本文將帶您一起體驗jQuery實現(xiàn)的一個可以滾動的十分友好的分步注冊向?qū)?，需要的朋友可以參考?/div> 2015-08-08
元素綁定jquery中的toggle后，元素隱藏，開始的時候 我怎么也沒想到是這里有問題，我找了半天才發(fā)現(xiàn)是因為綁定了toggle方法2014-03-03
這篇文章主要介紹了jQuery實現(xiàn)基本動畫效果的方法,結(jié)合實例形式分析了jQuery animate()方法實現(xiàn)動畫效果相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
本文為大家詳細介紹下Jquery easyui 下loaing效果具體是如何實現(xiàn)的，感興趣的各位可以參考下2013-08-08
這篇文章主要為大家詳細介紹了簡單實現(xiàn)JQuery文本框水印插件的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了使用jquery實現(xiàn)的鼠標拖動排序Li或Table,需要的朋友可以參考下2014-05-05
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象的具體實現(xiàn)，感興趣的朋友不要錯過2013-12-12
對博客系統(tǒng)已經(jīng)做到了博客評論模塊部分了，對單篇博文進行靜態(tài)化的同時對博文的評論部分采取AJAX的方式去讀取。2009-11-11
下面小編就為大家?guī)硪黄狫Query 獲取Dom元素的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了關(guān)于jQuery中ajax相關(guān)知識點的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03最新評論