jQuery框架"风云榜"案例

谁践踏了优雅 2021-12-18 07:03 228阅读 0赞

<title>电影风云榜</title>
        <style>
            /*清空默认样式*/
            *{padding:0;margin:0;border:0;list-style:none;}
            /*设置div盒子宽度和边框和盒子居中*/
            .all{width:320px;height:auto;border:1px solid #ccc;margin:50px auto;}
            /*设置每个li底部虚线*/
            .all li{border-top:1px dashed #cccccc;overflow: hidden;}
            /*设置h3高度和颜色*/
            .all h3{height: 40px;color:deeppink;line-height:40px;text-align: center;}
            /*设置文字*/
            .title{height: 40px;line-height: 40px;}
            /*设置文字左边span样式*/
            .title span{width: 20px;height: 20px;background: #ccc;color:#ffff;text-align:center;
                line-height:20px;float: left;margin-top: 10px;}
            /* 选择前三个li的title类名里面的span */
            /*设置前三个span颜色*/
            .all li:nth-of-type(-n+3) .title span{background: deeppink;}
            /*设置图片宽度浮动元素*/
            .desc img{width: 100px;float: left;margin-right:10px;padding-bottom: 10px;}
            .desc p{font-size:14px;line-height: 26px;color: #666666;}
            .desc{display: none;}
            /* 选择第一个li里面的desc设置显示 */
            .all li:nth-of-type(1) .desc{display: block;}
    
        </style>
        <script src="../js/jquery-3.4.1.js"></script>
    </head>
    <body>
    <div class="all">
        <h3>电影风云榜</h3>
        <ul class="allIn">
            <li>
                <p class="title">
                <span>1</span>汉城</p>
                <div class="desc">
                    <img src="images/001.jpg" alt="">
                    <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
                        赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
                </div>
            </li>
            <li>
                <p class="title">
                    <span>2</span>汉城</p>
                <div class="desc">
                    <img src="images/002.jpg" alt="">
                    <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
                        赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
                </div>
            </li>
            <li>
                <p class="title">
                    <span>3</span>汉城</p>
                <div class="desc">
                    <img src="images/003.jpg" alt="">
                    <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
                        赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
                </div>
            </li>
            <li>
                <p class="title">
                    <span>4</span>汉城</p>
                <div class="desc">
                    <img src="images/004.jpg" alt="">
                    <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
                        赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
                </div>
            </li>
            <li>
                <p class="title">
                    <span>5</span>汉城</p>
                <div class="desc">
                    <img src="images/005.jpg" alt="">
                    <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
                        赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
                </div>
            </li>
    
        </ul>
    </div>
    <script>
        //鼠标移上li,控制当前li里面的desc显示,其他兄弟li里面的desc隐藏
     $(".all li").mouseenter(function () {
         // $(DOM标签对象)  li标签的子节点 .desc
         $(this).children(".desc").show();
         //li标签子节点的兄弟节点，隐藏
         $(this).siblings().children(".desc").hide();
     });

转载于:https://www.cnblogs.com/liout/p/11061018.html