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 相关文章推荐
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 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
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP实现简单日历类编写
2020/08/28 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
学习python处理python编码问题
2011/03/13 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
眼镜促销方案
2014/03/15 职场文书
感恩寄语大全
2014/04/11 职场文书
平面设计师岗位职责
2014/09/18 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
工作证明格式范文
2015/06/15 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书