2020-10-20 jQ写的电影排行榜

jQ写的电影排行榜,支持鼠标划入弹出内容

献上图片

jQ代码

 <script>
       $(function(){
        $("li").hover(function(){
            $(this).addClass("current");
        },function(){
            $(this).removeClass("current");
        })
       })
   </script>

css代码

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

html代码

    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>电影名称
                <div class="content"><img src="zl.jpg" alt=""><p>17日,未成年人保护法修订案经十三届全国人大常委会第二十二次会议表决通过,该法自2021年6月1日起施行。未成年人保护法是未成年人保护领域的综合性法律,新修订的未成年人保护法增加
                </p></div>
            </li>
            <li><span>2</span>电影名称
                <div class="content"><img src="zl.jpg" alt=""><p>18日,未成年人保护法修订案经十三届全国人大常委会第二十二次会议表决通过,该法自2021年6月1日起施行。未成年人保护法是未成年人保护领域的综合性法律,新修订的未成年人保护法增加
                </p></div></li>
            <li><span>3</span>电影名称
                <div class="content"><img src="zl.jpg" alt=""><p>19日,未成年人保护法修订案经十三届全国人大常委会第二十二次会议表决通过,该法自2021年6月1日起施行。未成年人保护法是未成年人保护领域的综合性法律,新修订的未成年人保护法增加
                </p></div>
            </li>
            <li><span>4</span>电影名称
                <div class="content"><img src="zl.jpg" alt=""><p>20日,未成年人保护法修订案经十三届全国人大常委会第二十二次会议表决通过,该法自2021年6月1日起施行。未成年人保护法是未成年人保护领域的综合性法律,新修订的未成年人保护法增加
                </p></div>
            </li>
            <li><span>5</span>电影名称
                <div class="content"><img src="zl.jpg" alt=""><p>21日,未成年人保护法修订案经十三届全国人大常委会第二十二次会议表决通过,该法自2021年6月1日起施行。未成年人保护法是未成年人保护领域的综合性法律,新修订的未成年人保护法增加
                </p></div>
            </li>
            <li><span>6</span>电影名称
                <div class="content"><img src="zl.jpg" alt=""><p>22日,未成年人保护法修订案经十三届全国人大常委会第二十二次会议表决通过,该法自2021年6月1日起施行。未成年人保护法是未成年人保护领域的综合性法律,新修订的未成年人保护法增加
                </p></div>
            </li>
        </ul>
    </div>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页