<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. java 数据库迁移工具 flyway

    官方 https://github.com/flyway/flyway 简易demo https://github.com/deadzq/flyway-demo 主要在配置文件上做改动

  2. 【JZOJ6223】【20190617】互膜

    题目 小\(A\)和小\(B\)在一个长度为\(2n\)的数组上面博弈,初始时奇数位置为A,偶数位置为B 小\(A\)先手,第\(i\)次操作的人可以将\(i\)或者\(i+1\)位置的值反转(也可以 ...

  3. Ajax 的一些概念 解析

    什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML. 从功能上来看是一种在无需重新加载整个网 ...

  4. eclipse为项目设置jdk

    1)在项目上右键选中properties,会进入如下界面 (2)然后点击Add Library,进入设置Library的界面 (3)选中JRE System Library进入下一界面就可以设置jdk ...

  5. Linux 上配置 AG

    SQL Server Always On Availability Group 配置步骤:配置三台 Linux 集群节点创建 Availability Group配置 Cluster Resource ...

  6. IT 常用单词表

    程序员英语单词册   前言   程序员必备的600个英语词汇(1)   程序员必备的600个英语词汇(2)   程序员必备的600个英语词汇(3)   程序员必备的600个英语词汇(4)   程序员不 ...

  7. 【数值分析】Python实现Lagrange插值

    一直想把这几个插值公式用代码实现一下,今天闲着没事,尝试尝试. 先从最简单的拉格朗日插值开始!关于拉格朗日插值公式的基础知识就不赘述,百度上一搜一大堆. 基本思路是首先从文件读入给出的样本点,根据输入 ...

  8. PostgreSQL--with子句

    在PostgreSQL中,WITH查询提供了一种编写辅助语句的方法,以便在更大的查询中使用.它有助于将复杂的大型查询分解为更简单的表单,便于阅读.这些语句通常称为公共表表达式(Common Table ...

  9. web服务器请求代理方式

    1 通信数据转发程序:代理.网关.隧道 代理:是一种有转发功能的应用程序,他扮演了位于服务器和客户端“中间人”的角色,接收客户端发送的请求并转发给服务器:同时也接收服务器返回的响应并转发给客户端. 使 ...

  10. 深度强化学习 之 运行环境 mujoco 报错 ERROR: GLEW initalization error: Missing GL version

    使用  mujoco环境  运行代码,报错 ERROR: GLEW initalization error: Missing GL version 一直无法解决,发现网址: https://blog. ...