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


Posted in Javascript onMarch 07, 2015

本文实例讲述了基于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程序设计有所帮助。

Javascript 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
javascript的键盘控制事件说明
Apr 15 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
jquery实现弹出层效果实例
May 19 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
js实现搜索栏效果
Nov 16 Javascript
JS实现文件动态顺序载入的方法
Mar 07 #Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 #Javascript
PHP守护进程实例
Mar 06 #Javascript
JavaScript操作Oracle数据库示例
Mar 06 #Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 #Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 #Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 #Javascript
You might like
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
javascript 常用功能总结
2012/03/18 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
学生个人求职自荐信格式
2013/09/23 职场文书
制定岗位职责的原则
2013/11/08 职场文书
行政助理岗位职责
2013/11/10 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
初中教师个人工作总结
2015/02/10 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
nginx结合openssl实现https的方法
2021/07/25 Servers