实现隔行换色效果的两种方式【实用】

2019/6/27 21:37:26

编程Tag： 隔行换色

本文主要是介绍实现隔行换色效果的两种方式【实用】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

纯CSS方式实现隔行颜色交替、鼠标经过高亮颜色：

<html>
<head>
 <title></title>
 <style type="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>
 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <style type="text/css">
 .alter-item {
  background-color: #eee;
 }

 .hightlight {
  background-color: Yellow;
 }
 </style>

 <script type="text/javascript">
 $(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");
  });
 }
 </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>

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持找一找教程网！

这篇关于实现隔行换色效果的两种方式【实用】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

实现隔行换色效果的两种方式【实用】

相关编程文章