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 相关文章推荐
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 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
上海无线电三厂简史修改版
2021/03/01 无线电
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
使用python加密自己的密码
2015/08/04 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
基于python的Paxos算法实现
2019/07/03 Python
django框架cookie和session用法实例详解
2019/12/10 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
什么是URL
2015/12/13 面试题
销售人员个人求职信
2013/09/26 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
优秀技术工人先进材料
2014/02/17 职场文书