脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 基于jQuery创建鼠标悬停效果

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

 更新时间：2015年03月07日 16:43:25   作者：老枪  
这篇文章主要介绍了基于jQuery创建鼠标悬停效果的方法,实例分析了jQuery实现鼠标特效的原理与详细步骤,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了基于jQuery创建鼠标悬停效果的方法。分享给大家供大家参考。具体实现方法如下：

1. 创建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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

最新评论