编程 Javascript

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程序设计有所帮助。

js实现背景图片感应鼠标变化的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript高级程序设计阅读笔记（十三） js定义类或对象

Aug 14 Javascript

纯js实现瀑布流展现照片(自动适应窗口大小)

Apr 08 Javascript

JS下拉框内容左右移动效果的具体实现

Jul 10 Javascript

简介JavaScript中Boolean.toSource()方法的使用

Jun 05 Javascript

学习JavaScript设计模式(策略模式)

Nov 26 Javascript

Javascript基于对象三大特性（封装性、继承性、多态性）

Jan 04 Javascript

一起学写js Calender日历控件

Apr 14 Javascript

从零学习node.js之模块规范（一）

Feb 21 Javascript

JavaScript实现审核流程状态的动态显示进度条

Mar 15 Javascript

详解Angular系列之变化检测(Change Detection)

Feb 26 Javascript

angularJs中json数据转换与本地存储的实例

Oct 08 Javascript

video.js添加自定义组件的方法

Dec 09 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