html设置鼠标背景,js设置鼠标悬停改变背景色实现详解

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

html:

this is test!

css:

.out{background-color: gray;}

.over{background-color: red;}

.down{background-color: yellow; }

Way1:

js:

$(function(){

var sign=document.getElementById("sign");

changBkColor(sign);

});

function changBkColor(obj){

obj.οnmοuseοver=function(){ this.className="over"; };//鼠标悬停事件

obj.οnmοuseοut=function(){ this.className="out"; };//鼠标离开事件

obj.οnmοusedοwn=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');

});

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。