基于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 相关文章推荐
用jQuery中的ajax分页实现代码
Sep 20 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
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
PHP实现变色验证码实例
2014/01/06 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JS画线(实例代码)
2013/11/20 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
javascript时间差插件分享
2016/07/18 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python for循环及基础用法详解
2019/11/08 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
海南地接欢迎词
2014/01/14 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
赔偿协议书
2015/01/27 职场文书
合同补充协议书
2016/03/24 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技