JS+CSS实现鼠标经过div(li)背景变色
所属栏目：DIV+CSS
浏览：次 来源：未知
要使用到的事件监听对象:
window.attachEvent //IE写法
window.addEventListener //Mozilla FF写法
1). CSS代码:
@charset "utf-8";
/*元素初始值*/
html {background: #FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;}
p{cursor: text;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul{list-style-type: none;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
img{display:block;}
caption,th{text-align:left;}
body{position: relative;font-size:62.5%;font-family: "宋体"}
a{text-decoration: none;}
/*demo所用元素值*/
#need {margin: 20px auto 0;width: 610px;}
#need li {height: 25px;width: 400px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text; line-height:25px;list-style:none; padding:3px}
#need li:hover,#need li.hover {background: #FFE8E8;}
2). JS代码:
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
} //IE兼容
else if (window.addEventListener) {
window.addEventListener("load", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
}, false);
} //Mozilla/Firefox兼容
}
hover = function(sfEls) {
for (var i=0; i
sfEls[i].οnmοuseοver=function() {
this.className+=" hover";
}
sfEls[i].οnmοuseοut=function() {
this.className=this.className.replace(/hover\b/, ""); //先对hover进行正则转义,即只要找到以hover开头或结尾的样式,替换为空样式
}
}
}
suckerfish(hover, "li");
3. HTML代码
麦蒂已抵达青岛 球迷太多发布会取消欧冠-巴萨压哨绝杀 2-1胜凯尔特人彭伟国：梅西都过不了中国体测詹姆斯10+8领技术犯规 热火擒山猫
顶一下
(0)
0%
踩一下
(0)
0%
畅言评论代码
