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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
常用的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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
vue实现选中效果
2020/10/07 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python实现电脑自动关机
2018/06/20 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
五好党支部事迹材料
2014/02/06 职场文书
信用卡工资证明格式
2014/09/13 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
电工生产实习心得体会
2016/01/22 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python