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的设计模式
Nov 22 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
js获取微信版本号的方法
May 12 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
vue中对象数组去重的实现
Feb 06 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支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Django 反向生成url实例详解
2019/07/30 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python 字符串常用方法汇总详解
2019/09/16 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
汉语言文学职业规划
2014/02/14 职场文书
安全标准化实施方案
2014/02/20 职场文书
会计岗位职责模板
2014/03/12 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
实习感想范文
2015/08/10 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
教你一步步实现一个简易promise
2021/11/02 Javascript