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>
  • 相关阅读:
    文章块引用模版
    悬停工具提示
    各个知识点
    Github Fork 缎带.html
    css重置样式
    暗灰色的圆形按钮.html
    css中的居中的方法
    display:table的几个用法 块级子元素垂直居中
    <meta>标签中http-equiv属性的属性值X-UA-Compatible详解
    jQuery难学是因为什么?
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/12574609.html
Copyright © 2011-2022 走看看