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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vue-test-utils初使用详解
May 23 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 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
thinkphp特殊标签用法概述
2014/11/24 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
python多线程编程中的join函数使用心得
2014/09/02 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python 制作磁力搜索工具
2021/03/04 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
行政部主管岗位职责
2013/12/28 职场文书
工作表现自我评价
2014/02/08 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
中学教师教学工作总结
2015/08/13 职场文书
python解决12306登录验证码的实现
2021/04/18 Python