主页 / 网络编程 /

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

网络编程 2021-07-04 19:19www.168986.cn编程入门
本文主要介绍了实现隔行颜色交替 鼠标经过高亮颜色的两种方式的具体实例，有助于理解和使用。方案一纯CSS编写；方案二js代码编写。需要的朋友可以参考下

纯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./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>

以上就是本文的全部内容，希望对大家有所帮助，也希望多多支持狼蚁SEO！

上一篇：详解JS-- 浮点数运算处理 下一篇：javascript实现无法关闭的弹框

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by