<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击和划过的不同效果</title>
<script src="jquery.js"></script>
<style>
*{margin: 0;padding: 0;}
ul,li{ list-style: none;float: left; margin-left: 40px;}
li{ 40px;height: 40px; background: #ccc;}
</style>
<script>
$(function(){
$("ul li").each(function(i){
var _in = i;
$(this).hover(function(){
$(this).attr('data-time')==="click"+i?void(0):$(this).attr("class","hover"+i);
},function(){
$(this).attr('class')==="click"+i?void(0):$(this).attr("class","");
})
});
$("ul li").each(function(i){
var _in = i;
$(this).click(function(){
$(this).attr('data-time','click'+i).siblings().attr('data-time',"")
$(this).attr("class","click"+i).siblings().attr('class',"");
})
})
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
自己写对应的css：
li.hover0{},li.hover1{}，li.hover2{}，li.hover3{}
li.click0{},li.click1{}，li.click2{},li.click3{}