鼠标划过和点击产生不同的效果

最新推荐文章于 2021-06-04 05:43:14 发布

weixin_30877493

最新推荐文章于 2021-06-04 05:43:14 发布

阅读量123

点赞数

原文链接：http://www.cnblogs.com/rainheader/p/4597171.html

版权

<!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{ width: 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{}

转载于:https://www.cnblogs.com/rainheader/p/4597171.html