jQuery框架"風雲榜"案例

時間 2019-12-11
原文原文鏈接
<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();
 });
相關標籤/搜索