recherche

Maison  >  Article  >  php教程  >  实现隔行换色效果的两种方式【实用】

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

高洛峰
高洛峰original
2016-12-05 09:43:221414parcourir

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


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：正则表达式,替换所有HTML标签的简单实例Article suivant：浅谈Jquery页面初始化的4种方式

Articles Liés

Voir plus