<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. CSPS_112

    这是Dybala神的差点AK场, 可我T2读入写挂&&T3上届算错没有AK 如果这是C... T1 xjb猜了个结论就过对拍 T2 topsort好题 T3 各险绅嗵的一个dp 我打的 ...

  2. 分类模型的性能评价指标（Classification Model Performance Evaluation Metric）

    二分类模型的预测结果分为四种情况(正类为1,反类为0): TP(True Positive):预测为正类,且预测正确(真实为1,预测也为1) FP(False Positive):预测为正类,但预测错 ...

  3. linux高性能服务器编程 (一) --Tcp/Ip协议族

    前言: 在学习swoole入门基础的过程中,遇到了很多知识瓶颈,比方说多进程.多线程.以及进程池和线程池等都有诸多的疑惑.之前也有学习相关知识,但只是单纯的知识面了解.而没有真正的学习他们的来龙去脉. ...

  4. linux修改固定IP

    点击虚拟机菜单栏的编辑,选择虚拟网络编辑器 选择Vmnet8 NAT模式,查看子网ip:192.168.233.0 我们的虚拟机网络模式也需要选择NAT模式 打开虚拟机,输入:ip addr 查看当前 ...

  5. windows批量删除当前目录以及子目录的所有空文件夹

    在桌面创建一个记事本,将以下内容复制粘贴到记事本中,将记事本的拓展名修改为bat即可,然后将该文件放到需要执行的目录双击. @echo off setlocal enabledelayedexpans ...

  6. element ui，input框输入时enter健进行搜索

    <el-form-item label="企业名称"> <el-input v-model="formSearch.kw" @keyup.en ...

  7. Asp.net MVC 权限验证，以及是否允许匿名访问

    public class CheckUserAttribute : ActionFilterAttribute, IAuthorizationFilter { public void OnAuthor ...

  8. python 播放MP3和MP4

    import pygame import time def play_music(): filepath = r"900A.mp3"; pygame.mixer.init() # ...

  9. 将linux上的网站代码托管到gogs git服务器上进行实时同步（实战）

    一.说明 本说明只针对php,其他语言需要编译请用别的架构实现 二.实现效果 本地开发员门提交推送代码到git服务器,会立即同步更新网站服务器上代码 三.实战步骤小节 首次托管请先看   https: ...

  10. ubuntu16.04 安装使用meld及问题

    本文链接:https://blog.csdn.net/ai_liuliu/article/details/95504095安装meldsudo apt-get install meld启动meld方法 ...