用php语句怎样隔行跳色,实现隔行换色效果的两种方式【实用】

纯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中文网，转载请注明出处，感谢您的尊重！