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函数、方法、对象代码
Oct 29 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
js实现类选择器和name属性选择器的示例步骤
Feb 07 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
详解Python3中yield生成器的用法
2015/08/20 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Java面试题及答案
2012/09/08 面试题
土木工程专业自荐信
2013/10/04 职场文书
幼儿教师研修感言
2014/02/12 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
争先创优公开承诺书
2014/08/30 职场文书
普宁寺导游词
2015/02/04 职场文书
家长意见书
2015/06/04 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Golang入门之计时器
2022/05/04 Golang