js实现背景图片感应鼠标变化的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js实现背景图片感应鼠标变化的方法。分享给大家供大家参考。具体分析如下:

鼠标点击后背景图片变化,点击另外一个菜单项前面的会自动恢复背景,其实这个如果单纯使用CSS是没办法做的,我们还要使用JS来判断鼠标状态,代码如下:

<style type="text/css"> 
.dh a{
background:#FFFFCC;
width:50px;
height:30px;
display:block; 
text-align:center;
color:#000000;
} 
.dh a:hover{
background:#FF9900;
} 
</style> 
</head> 
<body> 
<div> 
 <div class="dh"><a href="#">导航1</a></div> 
 <div class="dh"><a href="#">导航2</a></div> 
 <div class="dh"><a href="#">导航3</a></div> 
 <div class="dh"><a href="#">导航4</a></div> 
 <div class="dh"><a href="#">导航5</a></div> 
</div> 
<script type="text/javascript"> 
$(function(){ 
  $(".dh a").click(function(){ 
    $(".dh a").removeAttr("style"); 
    $(this).attr("style","background:#CCFF99;"); 
  }) 
}) 
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
常用的JavaScript模板引擎介绍
Feb 28 #Javascript
JavaScript操作Cookie详解
Feb 28 #Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 #Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 #Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 #Javascript
浅谈JavaScript数据类型及转换
Feb 28 #Javascript
javaScript基础语法介绍
Feb 28 #Javascript
You might like
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
详解JS函数重载
2014/12/04 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python实现音乐下载器
2018/04/15 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Puppeteer使用示例详解
2019/06/20 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
暑假实习求职信范文
2013/09/22 职场文书
事业单位请假制度
2014/01/13 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
军训感想500字
2014/02/20 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
法人授权委托书范本
2014/09/17 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server