js设置鼠标悬停改变背景色
2018-01-03 13:50
513 查看
看了网上那么多的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'); }); });
相关文章推荐
- FineReport JS实现分页预览改变鼠标悬停所在的行列的背景色
- jquery 表格(鼠标悬停列标题,改变该列的背景色)
- js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- 使用鼠标监听器,使鼠标悬停在JTable某行时背景色改变
- WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
- JS实现图片自动播放,并在鼠标悬停某个圆点时,图片改变为其代表的图片。
- 【前端积累】圆角水平菜单,一张背景图片,选中或鼠标悬停背景的下一部分上移改变背景色
- android 鼠标悬停状态下改变背景色(类似Button、listview item 的selector)
- js控制鼠标移动到表格的某一行时改变该行的背景色
- 鼠标悬停改变table的行背景色(相继加手型光标和单击事件)
- 设置鼠标移动到DIV里面的内容上面 DIV标签改变背景色
- div css 鼠标悬停在div层上时,div背景色改变
- 使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- 鼠标悬停时文字颜色随机改变的js特效
- DHTML技术演示---动态设置表格行间隔显示、表格排序、鼠标悬停样式改变
- 一个简单的JS鼠标悬停特效具体方法
- js鼠标悬停效果
- JS鼠标事件(监听鼠标点击/释放,鼠标悬停/离开等)
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。