基于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 相关文章推荐
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
Openlayers实现测量功能
Sep 25 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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
PHP页面间传递参数实例代码
2008/06/05 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
PHP数据类型的总结分析
2013/06/13 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
基于python实现百度翻译功能
2019/05/09 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
考试违纪检讨书
2014/02/02 职场文书
仓库主管岗位职责
2014/03/02 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
公证委托书格式
2014/09/13 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle