脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 隔行换色

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

 更新时间：2016年11月27日 16:49:08   作者：森林王子  
本文主要介绍了实现隔行颜色交替 鼠标经过高亮颜色的两种方式的具体实例，有助于理解和使用。方案一：纯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.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>

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

您可能感兴趣的文章:

相关文章

最新评论