实现隔行换色效果的两种方式【实用】
纯CSS方式实现隔行颜色交替、鼠标经过高亮颜色：
<html>
<head>
<title></title>
<styletype="text/css">
ul{list-style:none}
li:nth-child(odd){background-color:#eee}
li:hover{background-color:Yellow}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
</html>
js方式实现隔行颜色交替、鼠标经过高亮颜色：
<html>
<head>
<title></title>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<styletype="text/css">
.alter-item{
background-color:#eee;
}
.hightlight{
background-color:Yellow;
}
</style>
<scripttype="text/javascript">
$(function(){
//隔行颜色
$("ulli:odd").addClass("alter-item");
method1();
});
//方法1：
functionmethod1(){
$("ulli").hover(function(){
$(this).addClass("hightlight");
},function(){
$(this).removeClass("hightlight")
});
}
//方法2：
functionmethod2(){
$("ulli").mouseover(function(){
$(this).addClass("hightlight").siblings().removeClass("hightlight");
});
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222222222</li>
<li>111</li>
<li>444444444444444444444</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持毛票票！