jQuery 的选择器：隔行变色加高亮显示

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求
1.所有展示数据隔行变色，颜色自定义。
2.鼠标经过时高亮显示，移开后恢复。
3.代码要求：jQuery 的选择器、样式操作 css()
在这里插入图片描述

思路
1.获取奇数行和偶数行
2.设置不一样的颜色
3.鼠标进入设置其他颜色
4.移开恢复正常或者鼠标进入重新设置隔行变色覆盖之前操作
5.mouseover 事件，或者 hover 事件均可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色加高亮显示</title>
    <script src="jquery.min.js"></script>
    <style>
        li {
            margin: 5px;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
    <script>
        $(function () {
            $('ul li:odd').css('backgroundColor', 'red');
            $('ul li:even').css('backgroundColor', 'skyblue');
            $('ul li').mouseover(function () {
                // $('ul li').hover(function () {
                $('ul li:odd').css('backgroundColor', 'red');
                $('ul li:even').css('backgroundColor', 'skyblue');
                $(this).css('backgroundColor', 'yellow');
            })
        })
    </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>
</body>

</html>

原文链接：https://blog.csdn.net/qq_45645902/article/details/106003384