看了网上那么多的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. ddd 聚合根 之 聚合与不聚合 设计

    聚合 不聚合 订单和订单明细 论坛主贴与贴子回复 订单和收货地址(vo)  

  2. 深入java集合学习1-集合框架浅析

    前言 集合是一种数据结构,在编程中是非常重要的.好的程序就是好的数据结构+好的算法.java中为我们实现了曾经在大学学过的数据结构与算法中提到的一些数据结构.如顺序表,链表,栈和堆等.Java 集合框 ...

  3. 关于 IIS 中 Excel 访问的问题

    关于 IIS 上 Excel 文件的访问, 一路上困难重重, 最后按以下步骤进行设置, 可在 IIS 中正常使用! 1. 引用及代码: 1). 项目中添加 Excel 程序集引用(注意: 从系统 CO ...

  4. Microsoft SQL Server 2008 R2 安装卸载

    问题 问题1 标题: Microsoft SQL Server 2008 R2 安装程序 ------------------------------ 出现以下错误: Could not open k ...

  5. web前端(实习生)之 “百度一面”

    2016.3.18,星期五.我经历了我的第一次面试. 不得不说,百度是一个高效的公司,在短短一下午之间我就直接经历了一面二面,说没有压力是假的,还记得在中途等待二面的时候我至少有一小段的时间脑子是卡带 ...

  6. ASP.NET之纠错

    甘特图是:计划项目的时间安排和资源平衡 IoC容器会自动判断javabean和某些数据类型是否建立起依赖关系(装配是否成功),主要用在自动装配中. 通过设置属性<bean id="&q ...

  7. C# 带签名dll破解

    首先申明,本文只是从技术的角度来分析下怎样破解带签名的C#写的dll文件.大家如有遇到收费的软件或类库还是应该去购买正版,程序员何苦为难程序员呢. 不带签名的破解 不带签名的dll文件的破解很简单,通 ...

  8. canvas贝塞尔曲线 - 2

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM

  9. mongodb 速成笔记

    以下环境为mac osx + jdk 1.8 + mongodb v3.2.3 一.安装 brew安装方式是mac下最简单的方式 brew update brew install mongodb 其它 ...

  10. [LeetCode] Pascal's Triangle II 杨辉三角之二

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...