這篇文章主要介紹了基于jQuery創建鼠標懸停效果的方法,實例分析了jQuery實現鼠標特效的原理與詳細步驟,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了基于jQuery創建鼠標懸停效果的方法。分享給大家供大家參考。具體實現方法如下：

1. 創建HTML：

1. <ul> 
2. <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> 
3. </ul> 

2. 選擇.mainnav的class：

1. $(".mainnav").hover( 
2. function () { 
3. }, 
4. function () { 
5. } 
6. ); 

3. 建立變量imgPath，指定圖片SRC：

1. $(".mainnav").hover( 
2. function () { 
3. // Grab the source 
4. var imgPath = $(this).attr("src"); 
5. }, 
6. function () { 
7. // Grab the source 
8. var imgPath = $(this).attr("src"); 
9. } 
10. ); 

4. 找到字符串off，用on替換：

1. $(".mainnav").hover( 
2. function () { 
3. // Grab the source 
4. var imgPath = $(this).attr("src"); 
5. // Replace the path in the source 
6. $(this).attr("src",imgPath.replace("off", "on")); 
7. }, 
8. function () { 
9. // Grab the source 
10. var imgPath = $(this).attr("src"); 
11. // Replace the path in the source 
12. $(this).attr("src",imgPath.replace("on", "off")); 
13. } 
14. ); 

希望本文所述對大家的jQuery程序設計有所幫助。