基于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 相关文章推荐
js类 from qq
Nov 13 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
js 数据类型判断的方法
Dec 03 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python装饰器用法实例总结
2018/05/26 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
电气技术员岗位职责
2013/11/19 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
《乌塔》教学反思
2014/02/17 职场文书
对公司合理化的建议书
2014/03/12 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书