jQuery框架"风云榜"案例

<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();
 });
posted on 2019-06-20 20:01 edumail 阅读(226) 评论(0) 收藏举报