<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. Fast + Small Docker Image Builds for Rust Apps

    转自:https://shaneutt.com/blog/rust-fast-small-docker-image-builds/ In this post I’m going to demonstr ...

  2. C++ 类型转换符区别分析

    转载自:https://blog.csdn.net/legalhighhigh/article/details/87459995 1.static_cast用于将参数转换为指定类型.需要注意的是,进行 ...

  3. 进程、线程、IP、端口间关系

    进程.线程.IP.端口间关系 进程是指在系统中正在运行的一个应用程序: 线程是系统分配处理器时间资源的基本单元,或者说进程之内独立执行的一个单元. 对于操作系统而言,其调度单元是线程.一个进程至少包括 ...

  4. [转]Json字符串和map和HashMap之间的转换

    需要导入alibaba.fastJsonmaven中的依赖为 <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> ...

  5. 【maven】插件和依赖管理

    1.插件管理 定义 pluginManagement 用来做插件管理的.它是表示插件声明,即你在项目中的pluginManagement下声明了插件,Maven不会加载该插件,pluginManage ...

  6. nmon报告分析

    nmon结果说明及分析 2018年09月29日 16:12:10 Jio_2018 阅读数 2334   使用nmon analyser生成的结果文件包含了N多个sheet页,下面只是结合个人经验对几 ...

  7. win 10 关闭或打开 测试模式

    一.关闭测试模式 方法: 以管理员身份运行 cmd 运行:bcdedit /set testsigning off 重启电脑 二.开启测试模式 以管理员身份运行 cmd 运行:bcdedit /set ...

  8. zk单点部署

    一.环境准备 当前环境:centos7.3一台软件版本:zookeeper-3.5.2部署目录:/usr/local/zookeeper启动端口:2181配置文件:/usr/local/zookeep ...

  9. IDEA查看接口的实现类

    查找接口的实现类: 快捷键 ctrl + alt +B 再按F2查看详细文档注解 查看类或接口的继承关系: ctrl + h

  10. Oracle 性能分析

    1.--查出耗时长的 10条SQL select * from (select v.sql_id, v.child_number, v.sql_text, v.elapsed_time, v.cpu_ ...