纯CSS方式实现隔行颜色交替、鼠标经过高亮颜色:
ul{list-style:none}
li:nth-child(odd){background-color:#eee}
li:hover{background-color:Yellow}
- 111
- 111
- 111
- 111
- 111
- 111
- 111
js方式实现隔行颜色交替、鼠标经过高亮颜色:
.alter-item {
background-color: #eee;
}
.hightlight {
background-color: Yellow;
}
$(function () {
//隔行颜色
$("ul li:odd").addClass("alter-item");
method1();
});
//方法1:
function method1() {
$("ul li").hover(function () {
$(this).addClass("hightlight");
}, function () {
$(this).removeClass("hightlight")
});
}
//方法2:
function method2() {
$("ul li").mouseover(function () {
$(this).addClass("hightlight").siblings().removeClass("hightlight");
});
}
- 111
- 222222222
- 111
- 444444444444444444444
- 111
- 111
- 111
本文原创发布php中文网,转载请注明出处,感谢您的尊重!