<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. 73: luogu 2014 树形dp

    $des$ 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分,每门课有 ...

  2. eclipse juno 怎么安装maven

    步骤如下: 1.下载maven的bin,在apache官方网站可以下载. 2.下载下来之后,解压,找个路径放进去, 把bin的位置设在环境变量里,新建环境变量MAVEN_HOME. 3.在PATH里加 ...

  3. 腾讯云手动搭建nginx+php-fpm并自启动

    自己一点小爱好,搭建了一个小网站植物大战僵尸百科, 使用的是腾讯云,市场里的镜像不好用,所以自己手动搭建一波. centos 7 编译安装 php-7.2.11的步骤 在官网下载php-7.2.11的 ...

  4. axios跨域请求报错：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

    在做项目时,用到axios,数据用post提交时,老是报错,错误提示为: Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' fro ...

  5. 剑指offer：左旋转字符串

    题目描述: 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”ab ...

  6. TensorFlow中random_normal和truncated_normal的区别

    原文链接:https://blog.csdn.net/zhangdongren/article/details/83344048 区别如下: tf.random_normal(shape,mean=0 ...

  7. Linux Shell：根据指定的文件列表 或 map配置，进行文件位置转移

    读取配置文件,进行文件位置转移 在whenb.csv中指定了需要从/home/root/cf/下移除到/home/root/cf_wh/下文件列表,whenb.csv中包含记录如下: enb- enb ...

  8. MXNet 定义新激活函数（Custom new activation function）

    https://blog.csdn.net/weixin_34260991/article/details/87106463 这里使用比较简单的定义方式,只是在原有的激活函数调用中加入. 准备工作下载 ...

  9. vue---监听浏览器窗口的宽度

    使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化. <template>     <div class="conte ...

  10. uni-app打包程序 Hbuilder X 用自有证书 苹果证书打包 ios App、用DCloud公用证书打包Android APP

    Android用HBuilder的DCloud公用证书即可 HBuilderX  uni-app打包成apk安装到手机首先要登录,没有帐号可以注册,接着点击运行—原生App-云打包,配置完后点击打包, ...