美文网首页
隔行变色2

隔行变色2

作者: 琪33 | 来源:发表于2018-04-26 16:11 被阅读0次
 <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>

相关文章

  • 隔行变色2

  • webpack进阶【3】:webpack实现隔行变色

    webpack实现隔行变色:页面文字隔行变色 注意:本进阶在webpack【2】的基础上进行衍生 一、建立一个in...

  • 【前端案例】07 - 表格隔行变色 + 全选和反选

    1. 表格隔行变色 表格隔行变色,主要使用循环为鼠标添加事件,改变每行的背景颜色实现。 2. 全选和反选 (难点)...

  • 2018-06-28

    A今天学到了什么 1.实现勾选 2.修改 2.1修改元素的样式 2.2隔行变色 2.3JS实现隔行变色 3.显示隐...

  • day02

    A今天学到了什么 1.实现勾选 2.修改 2.1修改元素的样式 2.2隔行变色 2.3JS实现隔行变色 3.显示隐...

  • day02

    A今天学到了什么 1.实现勾选 2.修改 2.1修改元素的样式 2.2隔行变色 2.3JS实现隔行变色 3.显示隐...

  • 隔行变色

    隔行变色

  • 隔行变色

    隔行变色 今天我们来做一个好玩的东西:隔行变色。先来看一下效果图。 接下来我们看一下代码。 分析代码很简单,获取所...

  • 隔行变色

  • 隔行变色

网友评论

      本文标题:隔行变色2

      本文链接:https://www.haomeiwen.com/subject/omidlftx.html