jQuery实现电影排行榜

        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        
        .box>h1 {
            font-size: 20px;
            line-height: 35px;
            padding-left: 10px;
            border: 1px dashed #ccc;
        }
        
        .box>ul>li {
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
        }
        
        .box>ul>li:nth-child(-n+3) span {
            background: #f40;
        }
        
        .box>ul>li>span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        
        .content {
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }
        
        .box>ul>li>.content>img {
            width: 85px;
            height: 120px;
            float: left;
        }
        
        .box>ul>li>.content>p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }
        
        .current .content {
            display: block;
        }

    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li>
                <span>1</span> 电影名称
                <div class="content">
                    <img src="img/zl.jpg" alt="">
                    <p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
                </div>
            </li>
            <li>
                <span>2</span> 电影名称
                <div class="content">
                    <img src="img/zl.jpg" alt="">
                    <p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
                </div>
            </li>
            <li>
                <span>3</span> 电影名称
                <div class="content">
                    <img src="img/zl.jpg" alt="">
                    <p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
                </div>
            </li>
            <li>
                <span>4</span> 电影名称
                <div class="content">
                    <img src="img/zl.jpg" alt="">
                    <p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
                </div>
            </li>
            <li>
                <span>5</span> 电影名称
                <div class="content">
                    <img src="img/zl.jpg" alt="">
                    <p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
                </div>
            </li>
            <li>
                <span>6</span> 电影名称
                <div class="content">
                    <img src="img/zl.jpg" alt="">
                    <p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
                </div>
            </li>
        </ul>
    </div>

    <script src="js/jquery-1.8.3.js"></script>

        $(function() {
            // //1.监听li的移入事件
            // $("li").mouseenter(function() {
            //     $(this).addClass("current");
            // });

            // //2.监听li的移出事件
            // $("li").mouseleave(function() {
            //     $(this).removeClass("current");
            // });

            //或者利用 hover 进行简化
            $("li").hover(function() {
                $(this).addClass("current");
            }, function() {
                $(this).removeClass("current");
            });
        });

标签：jQuery,box,孤身,非洲,电影,li,排行榜,同胞,height
来源： https://blog.csdn.net/weixin_43285360/article/details/121232779