看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考

html:

<div id="sign">this is test!</div>

css:      

<style type="text/css">
.out{background-color: gray;}
.over{background-color: red;}
.down{background-color: yellow; }
</style>          

Way1:

js:

$(function(){
var sign=document.getElementById("sign");
changBkColor(sign);
});
function changBkColor(obj){
obj.onmouseover=function(){ this.className="over"; };//鼠标悬停事件
obj.onmouseout=function(){ this.className="out"; };//鼠标离开事件
obj.onmousedown=function(){this.className="down";};//鼠标点击时触发事件
}

Way2:(JQuery)

/*  $(obj).hover(inFunction,outFunction)
* 等同于$(obj).mouseover().mouseout();
*/
$(function(){
$('#sign').hover(function() {
$('#sign').addClass('over');
}, function() {
$('#sign').removeClass('over').addClass('out');
});
});


                                             记录点点滴滴,虽然微不足道。

  

js设置鼠标悬停改变背景色的更多相关文章

  1. CSS或者JS实现鼠标悬停显示另一元素

    想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现.js:写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mous ...

  2. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  3. JD . 简单的网站构成、引入图标、去除 图片间距/加粗/倾斜/下划线/蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式

    模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境     (结构样式行为分离)   HTML 核心文件     index.html CSS       控制样式 base.css(基础样式 ...

  4. webstorm intelliJ IDEA phpstorm 设置鼠标滚动改变字体大小

    control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮打开,然后就可以通过 ctrl+鼠标上下滚动调节字体大小

  5. HTML鼠标悬停改变样式

    a.tt:hover {color: #FF0000;} <a class="tt" href="test.html">test</a> ...

  6. wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色

    今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemT ...

  7. WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画

    原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...

  8. 使用鼠标监听器,使鼠标悬停在JTable某行时背景色改变

    一.需要知道的事实: 1.当鼠标悬停在JTable上时,相应的格子(cell)的渲染器(TableCellRenderer)的渲染方法(getTableCellRenererComponent)会被调 ...

  9. MFC 使用位图按钮,并且设置按钮的鼠标悬停效果

    系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...

随机推荐

  1. MS SQLServer 2008数据库处于SUSPECT情况下的处理

    做任何恢复操作之前,请先备份.mdf, .ndf和.ldf文件. use master go --将处于suspect状态下的数据库设置为紧急状态 alter database <Databas ...

  2. ASP.NET MVC 身份认证

    身份认证的好处就是, 如果这个页面没有登录, 刷新后会自动跳到登录页要求登录,保证了应用程序的安全.而Forms 身份认证是web下最常用的,如何配置呢?见下(基于mvc 4) 1.在webconfi ...

  3. 理解和使用SQL Server中的并行

    许多有经验的数据库开发或者DBA都曾经头痛于并行查询计划,尤其在较老版本的数据库中(如sqlserver2000.oracle 7.mysql等).但是随着硬件的提升,尤其是多核处理器的提升,并行处理 ...

  4. 从零自学Hadoop(19):HBase介绍及安装

    阅读目录 序 介绍 安装 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 上一篇, ...

  5. 基于IIS构建Pyathon Web服务

    本文简单叙述了在Windows下,如何利用IIS构建Python Web服务. 其主要步骤如下: 1.在IIS下构建一个站点,如图: 2.配置Python文件的处理程序,如图: 3.最后,在对应站点根 ...

  6. Web.xml配置详解

    (转自:http://www.cnblogs.com/chinafine/archive/2010/09/02/1815980.html) 1 定义头和根元素 部署描述符文件就像所有XML文件一样,必 ...

  7. Windows操作系统下远程连接MySQL数据库

    用Eclipse做一个后台项目,但是数据库不想放在本地电脑,于是买了一个腾讯云服务器(学生有优惠,挺便宜的),装上MySQL数据库,但是测试连接的时候,发现总是连接不是上,但是本地数据库可以连接,于是 ...

  8. Selenium-java-Log4j环境搭建和

    1 导入Log4j ,我这版本是1.2.17  自己选择版本  **别告诉我不会导入 2  Path  奶瓶 3 创建一个与src同目录文件 命名为 log4.properties 4 文件的内容是, ...

  9. 谈c++ pb_ds库(一)rope大法好

    参考资料 1)官方说明 支持 sorry,cena不支持rope 声明 1)头文件 #include<ext/rope> 2)调用命名空间 using namespace __gnu_cx ...

  10. rxjs5.X系列 —— filter系列 api 笔记

    欢迎指导与讨论 :) 前言 本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第二篇 -- filter转换.如有错漏,希望大家指出提醒O(∩_∩)O.更详细的资料尽在rxjs官 ...