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 技巧小结
Apr 02 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 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
smarty section简介与用法分析
2008/10/03 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
js 内存释放问题
2010/04/25 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
毕业典礼演讲稿
2014/05/13 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
python tqdm用法及实例详解
2021/06/16 Python
总结几个非常实用的Python库
2021/06/26 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
python中filter,map,reduce的作用
2022/06/10 Python