小墨の博客

梦想需要付诸行动,否则只能是梦

Jquery点击评分效果

点击代码右上角查看演示。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box">
            <p>点击评分:</p>
            <div class="content">
                <span><font color="#ccc">一分差评</font></span>
                <span><font color="#A4D3EE">二分渣渣</font></span>
                <span><font color="#7CCD7C">三分一般</font></span>
                <span><font color="#CD8500">四分还行</font></span>
                <span><font color="#f00">五分好评</font></span>
            <div class="tip"></div>
            </div>
        </div>
        <style>
        .box{
            width: 200px;
            height: 200px;
            border: 5px solid #c9c9c9;
            margin: 10px auto;
        }
        p{
            margin: 0;
            width: 190px;
            height: 40px;
            line-height: 40px;
            background: #39c;
            color: #fff;
            padding-left: 10px;
            
        }
        span{
            display: inline-block;
            width: 15px;
            height: 15px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 50%;
            cursor:pointer;
        }
        .content{
            width: 110px;
            height: 100px;
            margin: 50px auto;

        }
        span font{
            display: none;
        }
        .tip{
            font-weight: bold;
            width: 70px;
            margin: 10px auto;
        }
        </style>
        <script type="text/javascript" src="https://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
        <script>
                $(function() {
                    $("span").mouseover(function() {
                        $(this).css("background","#39c").nextAll().css("background","");
                        $(this).css("background","#39c").prevAll().css("background","#39c");
                        $("span").click(function() {
                            $("span").off();
                            $("span").css("cursor","auto");
                            // alert($(this).html());
                            var tip = $(this).html();
                            $(".tip").html(tip);
                        })
                    })
                })
        </script>
    </body>
</html>

参考:https://yaw.ee/1353.html

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:518
    • 页面总数:20
    • 分类总数:92
    • 标签总数:209
    • 评论总数:63
    • 浏览总数:244305

    | | |
    | |  Z-Blog PHP