li{
background: #f7b00f;
}
li:hover{
background: #204d9a;
}
li:nth-child(4n-1){ background:#204d9a; }
li:nth-child(4n-1):hover{
background: #f7b00f;
}
li:nth-child(4n-2){ background:#204d9a; }
li:nth-child(4n-2):hover{ background:#f7b00f; }
/* 1,4,5,8,9,12,13,16,17,20,21,24,25,28,29,32,33,36,37,40,41,44,45,48,49 */
富拓的像上面那些数字都是黄色背景
js做法
<script type="text/javascript">
$(function(){
/*var index = $(this).index()+1;
var s=index%4;
console.log(s);
if(s == 0 || (s-1)%4==0){
$(this).css("background", "green");
}else{
$(this).css("background", "red");
}*/
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
for(var index=0;index<lis.length;index++){
//lis[index].theIndex=index;
if(index == 0 || (index-1)%4==0){
$(this).css("background", "green");
}else{
$(this).css("background", "red");
}
//console.log(index)
}
$(".index").hover(function(){
var index = $(this).index()+1;
var s=index%4;
console.log(s);
if(s == 0 || (s-1)%4==0){
$(this).css("background", "green");
}else{
$(this).css("background", "red");
}
},function(){
var index = $(this).index()+1;
var s=index%4;
console.log(s);
if(s == 0 || (s-1)%4==0){
$(this).css("background", "#ffffff");
}else{
$(this).css("background", "#204d9a");
}
})
});
</script>