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

最新推荐文章于 2022-11-09 20:28:52 发布

没人回复我哼

最新推荐文章于 2022-11-09 20:28:52 发布

阅读量1k

点赞数 2

文章标签： javascript js

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

版权

学习来源：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>

没人回复我哼

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的选择器：隔行变色加高亮显示

要求仿股票等表单显示数据，各行变色，外加高亮显示，具体表现如下图：1）所有展示数据各行变色，颜色自定义。2）鼠标进入后高亮显示，移开后恢复。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S5lX39oo-1588933177993)(images/001.png)]训练目标学会使用 jQuery 的选择器，熟练样式操作 css()。训练提示1.获取奇数行和偶数行2.设置不一样的颜色3.鼠标进入设置其他颜色4.移开恢复正常或者鼠标进入重新设置隔行变
复制链接

扫一扫