基于jQuery创建鼠标悬停效果的方法

这篇文章主要介绍了基于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程序设计有所帮助。