隔行变色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            //需求;隔行变色;鼠标放进去还要变色。
            var jqli1 = $("li:odd");
            var jqli2 = $("li:even");
            jqli1.css("background","red");
            jqli2.css("background","yellow");

            //鼠标进入变色,移开回复
            //计数器
            var color = "";
            $("li").mouseenter(function () {
                color = $(this).css("background");
                $(this).css("background","blue");
            });
            //移开恢复
            $("li").mouseleave(function () {
                $(this).css("background",color);
            });
        });
    </script>
</head>
<body>

    <ul>
        <li>魂消香断玉环冷,锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷,锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷,锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷,锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷,锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷,锦裘绣帕不闻香.......</li>
    </ul>

</body>
</html>

 

posted @ 2018-01-04 13:44  松歌  阅读(173)  评论(0编辑  收藏  举报