js设置鼠标悬停改变背景色
看了网上那么多的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设置鼠标悬停改变背景色的更多相关文章
- CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现.js:写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mous ...
- jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程
一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...
- JD . 简单的网站构成、引入图标、去除 图片间距/加粗/倾斜/下划线/蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式
模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境 (结构样式行为分离) HTML 核心文件 index.html CSS 控制样式 base.css(基础样式 ...
- webstorm intelliJ IDEA phpstorm 设置鼠标滚动改变字体大小
control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮打开,然后就可以通过 ctrl+鼠标上下滚动调节字体大小
- HTML鼠标悬停改变样式
a.tt:hover {color: #FF0000;} <a class="tt" href="test.html">test</a> ...
- wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色
今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemT ...
- WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...
- 使用鼠标监听器,使鼠标悬停在JTable某行时背景色改变
一.需要知道的事实: 1.当鼠标悬停在JTable上时,相应的格子(cell)的渲染器(TableCellRenderer)的渲染方法(getTableCellRenererComponent)会被调 ...
- MFC 使用位图按钮,并且设置按钮的鼠标悬停效果
系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...
随机推荐
- 尝试解析js面试题(二)
说明:一共有13题(原本14题,最后一道什么鬼,嫌弃不要了),覆盖面比较广,都属于比较烧脑的类型,各种神坑:不过对于夯实js理论基础帮助非常大:看看都能做对几题吧(
- Oracle索引重建
一.前言 Oracle建议对于索引深度超过4级以及已删除的索引条目至少占有现有索引条目总数的20% 这2种情形下需要重建索引.有人持不同观点,就是强烈建议不要定期重建索引.索引重建是一个争论不休被不断 ...
- VS2010以及vs10sp1安装问题
进公司第一天搭建开发环境,由于系统版本有点低,安装遇到各种问题,在此总结一下,以备日后有用. 问题描述 Windows server 2003 安装VS2010时,安装到Microsoft.NET F ...
- properties属性文件工具类
package xxx.business.utils; import org.apache.commons.configuration.ConfigurationException; import o ...
- python 多进程使用总结
python中的多进程主要使用到 multiprocessing 这个库.这个库在使用 multiprocessing.Manager().Queue时会出问题,建议大家升级到高版本python,如2 ...
- jni操作jobject
一. 注册JNI函数 1. 静态方法 一般使用javah进行编译,生成很长的文件名和函数名字,这个书写不方便,影响运行效率. 2. 动态注册 使用JNINativeMe ...
- Geeklink引领智慧新生活!
煤油灯成为古董,管道天然气进入厨房,电脑挤进生活,手机代替书信成为通讯的主要工具-这些变化无不提醒我们,时代在变迁,科技在发展.而最近朋友圈和电视又在播报智能家居的生活方式-智能家电能实现怎样的情景功 ...
- 使用串口线真机调试Linux内核
一.环境 ubuntu 14.04 一台有串口的PC(编号PC1,被调试机器) 另一台PC通过USB转串口线连接PC1(编号PC2,发起调试命令的机器) 二.串口线配置及测试 安装cutecom US ...
- [LeetCode] Contains Duplicate 包含重复值
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- mac mysql5.7重置root密码
先停止mysql服务 //停止表权限 cd /usr/local/mysql/bin/ ./mysqld_safe --skip-grant-tables & 直接mysql 进入数据库 up ...