实现隔行颜色交替、鼠标经过高亮颜色

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

在线测试：http://www.runoob.com/try/try.php?filename=tryjquery_hide