<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="data:images/001.jpg" alt="">

                <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、

                    赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>

            </div>

        </li>

        <li>

            <p class="title">

                <span>2</span>汉城</p>

            <div class="desc">

                <img src="data:images/002.jpg" alt="">

                <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、

                    赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>

            </div>

        </li>

        <li>

            <p class="title">

                <span>3</span>汉城</p>

            <div class="desc">

                <img src="data:images/003.jpg" alt="">

                <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、

                    赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>

            </div>

        </li>

        <li>

            <p class="title">

                <span>4</span>汉城</p>

            <div class="desc">

                <img src="data:images/004.jpg" alt="">

                <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、

                    赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>

            </div>

        </li>

        <li>

            <p class="title">

                <span>5</span>汉城</p>

            <div class="desc">

                <img src="data: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();

 });

jQuery框架"风云榜"案例的更多相关文章

  1. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  2. 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

    http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  3. 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  5. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  6. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  7. 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享  在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...

  8. 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享    在开始讲解之前,我们先来看一下什 ...

  9. （转）使用Jquery+EasyUI 进行框架项目开发案例讲解之四---组织机构管理源码分享

    原文地址:http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码 ...

随机推荐

  1. VS2017 Asp.Net调式闪退处理

  2. Stringbuilde方法的用法以及其作用

    Stringbuilde的方法有以下几种(常用的):(java中的语法) 在程序开发过程中,我们常常碰到字符串连接的情况,方便和直接的方式是通过"+"符号来实现,但是这种方式达到目 ...

  3. OpenFOAM——平行平板间具有相对运动（库埃特流）

    本算例翻译整理自:http://the-foam-house5.webnode.es/products/chapter-1-plane-parallel-plates-case/ 这个算例研究了一个距 ...

  4. 软件工程 “校园汇” 个人IDEA竞选分析与总结

    IDEA竞选 19/10/8软件工程课上举行了一次IDEA竞选: 我的竞选IDEA是"校友汇",大学生的在线活动中心. 投票结果: 可以看到,校友会(汇)IDEA竞选结果十分惨淡, ...

  5. Maven中使用<version>LATEST</version>自动依赖最新版本引发的问题

    今天在打包项目的过程中出现了编译问题,奇怪的是这个项目已经好久没有修改过了,报错如下. 找不到符号 [ERROR] 符号: 方法 intent(java.lang.String) [ERROR] 位置 ...

  6. 《Hadoop综合大作业》

    作业要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3339 我主要的爬取内容是关于热门微博文章“996”与日剧<我要 ...

  7. mysql性能测试-------重要！！！

    我们在做性能测试的目的是什么,就是要测出一个系统的瓶颈在哪里,到底是哪里影响了我们系统的性能,找到问题,然后解决它.当然一个系统由很多东西一起组合到一起,应用程序.数据库.服务器.中中间件等等很多东西 ...

  8. mysql 5.6配置

    简洁版: [client] port = 3306 socket = /weyeedata/mysql/run/mysql.sock [mysqld] innodb_buffer_pool_size ...

  9. 查看 redis 请求日志

    转: 查看 redis 请求日志 2019-05-29 15:34:41 打卤 阅读数 1980更多 分类专栏: other   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转 ...

  10. Java抓取Codeforces——针对某一次提交的源码和数据

    需要引入Jsoup依赖: <dependency> <!-- jsoup HTML parser library @ https://jsoup.org/ --> <gr ...