zoukankan      html  css  js  c++  java
  • 隔行变色

    <!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>
  • 相关阅读:
    第一个gulp程序
    r.js打包
    吃饭途中的回忆
    IE下script标签的readyState属性
    CSS 选择器
    html的base标签
    迷你MVVM框架 avalonjs 1.3.9发布
    2014年的年终总结
    Visual Studio2017 数据库架构比较
    MVC开发中自定义返回类型
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/8192819.html
Copyright © 2011-2022 走看看