jQuery+flex(简单实用)简单实现淘宝京东五星好评(附注释)

最新推荐文章于 2023-05-29 23:38:41 发布

RamosTears

最新推荐文章于 2023-05-29 23:38:41 发布

阅读量514

点赞数 1

文章标签： jQuery 淘宝京东五星好评

本文链接：https://blog.csdn.net/ramosTears123/article/details/88989257

版权

效果图:

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            height: 200px;
            list-style:none;
            display:flex;
            justify-content:center;
            /*实现子元素在父元素中绝对居中*/
            align-items:center;
            font-size: 60px;
            border: 1px solid #000;
        }
        li{
            width: 80px;
        }
    </style>
</head>
<body>
<ul>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
    var sx="★";
    var kx="☆";
    $("li").mouseenter(function(){
        //鼠标移入是,让当移入的这个li以及他之前的所有li都变成实心星星,后边的所有都变成空心星星
        $(this).text(sx).prevAll().text(sx).end().nextAll().text(kx);

    });
    $("li").click(function(){
        //鼠标点击li的时候,给该li添加一个class=tag,移除其他所有兄弟的class
        $(this).addClass("tag").siblings().removeClass("tag");
    })
    $("ul").mouseleave(function(){
        //鼠标离开ul时候,让所有li都是空心,然后让有class=tag的这个Li前面的所有兄弟都是实心,后面的所有都是空心
        $(this).children().text(kx);
        $(".tag").text(sx).prevAll().text(sx).end().nextAll().text(kx);
    })

</script>
</body>
</html>

RamosTears

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery+flex(简单实用)简单实现淘宝京东五星好评(附注释)

效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; ...
复制链接

扫一扫