zoukankan      html  css  js  c++  java
  • 隔行变色加高亮显示

    1.获取奇数行和偶数行

    2.设置不一样的颜色

    3.鼠标进入设置其他颜色

    4.移开恢复正常或者鼠标进入重新设置隔行变色覆盖之前操作

    $(function () {
                //高大上隔行变色
                fn();
                //鼠标进入高亮显示
                $("ul li").mouseover(function () {
                    fn();
                    $(this).css("background","red");
                });
    
                //隔行变色
                function fn(){
                    $("ul li:odd").css("background","skyblue");
                    $("ul li:even").css("background","yellowgreen");
                }
            });
        </script>
    </head>
    <body>
        <ul>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
            <li>以色侍人,色衰而爱驰也;以才侍人,才进得久,互赏而终...</li>
        </ul>
  • 相关阅读:
    linux下配置php的一些信息
    前端学习
    Verilog笔记.3.有限状态机
    Verilog笔记.2.数字逻辑电路
    Verilog笔记.1.基本语法
    python3爬虫.4.下载煎蛋网妹子图
    python3爬虫.3.下载网页图片
    python3爬虫.2.伪装浏览器
    python3爬虫.1.简单的网页爬虫
    python3学习笔记.3.条件控制与循环
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/12574609.html
Copyright © 2011-2022 走看看