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编程开发中的五个实用小技巧
Jul 22 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
Python实现简单的代理服务器
2015/07/25 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python函数定义和调用过程详解
2020/02/09 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
请假条格式范文
2014/04/10 职场文书
销售团队口号大全
2014/06/06 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
学校会议通知范文
2015/04/15 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书