1. <title>电影风云榜</title>
  2.     <style>
  3.         /*清空默认样式*/
  4.         *{padding:0;margin:0;border:0;list-style:none;}
  5.         /*设置div盒子宽度和边框和盒子居中*/
  6.         .all{width:320px;height:auto;border:1px solid #ccc;margin:50px auto;}
  7.         /*设置每个li底部虚线*/
  8.         .all li{border-top:1px dashed #cccccc;overflow: hidden;}
  9.         /*设置h3高度和颜色*/
  10.         .all h3{height: 40px;color:deeppink;line-height:40px;text-align: center;}
  11.         /*设置文字*/
  12.         .title{height: 40px;line-height: 40px;}
  13.         /*设置文字左边span样式*/
  14.         .title span{width: 20px;height: 20px;background: #ccc;color:#ffff;text-align:center;
  15.             line-height:20px;float: left;margin-top: 10px;}
  16.         /* 选择前三个li的title类名里面的span */
  17.         /*设置前三个span颜色*/
  18.         .all li:nth-of-type(-n+3) .title span{background: deeppink;}
  19.         /*设置图片宽度浮动元素*/
  20.         .desc img{width: 100px;float: left;margin-right:10px;padding-bottom: 10px;}
  21.         .desc p{font-size:14px;line-height: 26px;color: #666666;}
  22.         .desc{display: none;}
  23.         /* 选择第一个li里面的desc设置显示 */
  24.         .all li:nth-of-type(1) .desc{display: block;}
  25.  
  26.     </style>
  27.     <script src="../js/jquery-3.4.1.js"></script>
  28. </head>
  29. <body>
  30. <div class="all">
  31.     <h3>电影风云榜</h3>
  32.     <ul class="allIn">
  33.         <li>
  34.             <p class="title">
  35.             <span>1</span>汉城</p>
  36.             <div class="desc">
  37.                 <img src="data:images/001.jpg" alt="">
  38.                 <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
  39.                     赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
  40.             </div>
  41.         </li>
  42.         <li>
  43.             <p class="title">
  44.                 <span>2</span>汉城</p>
  45.             <div class="desc">
  46.                 <img src="data:images/002.jpg" alt="">
  47.                 <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
  48.                     赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
  49.             </div>
  50.         </li>
  51.         <li>
  52.             <p class="title">
  53.                 <span>3</span>汉城</p>
  54.             <div class="desc">
  55.                 <img src="data:images/003.jpg" alt="">
  56.                 <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
  57.                     赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
  58.             </div>
  59.         </li>
  60.         <li>
  61.             <p class="title">
  62.                 <span>4</span>汉城</p>
  63.             <div class="desc">
  64.                 <img src="data:images/004.jpg" alt="">
  65.                 <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
  66.                     赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
  67.             </div>
  68.         </li>
  69.         <li>
  70.             <p class="title">
  71.                 <span>5</span>汉城</p>
  72.             <div class="desc">
  73.                 <img src="data:images/005.jpg" alt="">
  74.                 <p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
  75.                     赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
  76.             </div>
  77.         </li>
  78.  
  79.     </ul>
  80. </div>
  81. <script>
  82.     //鼠标移上li,控制当前li里面的desc显示,其他兄弟li里面的desc隐藏
  83.  $(".all li").mouseenter(function () {
  84.      // $(DOM标签对象)  li标签的子节点 .desc
  85.      $(this).children(".desc").show();
  86.      //li标签子节点的兄弟节点，隐藏
  87.      $(this).siblings().children(".desc").hide();
  88.  });

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. [RN] React Native 使用 react-navigation 报错 "Unable to resolve module `react-native-gesture-handler`

    在React Native 使用 react-navigation 过程中,报错 "Unable to resolve module `react-native-gesture-handle ...

  2. 洛谷P1265 公路修建题解

    题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公路.修建公路的任务由各城市共同完成. 修建工程分若干轮完成.在每一轮中,每个城市选择一个 ...

  3. linux命令之------快捷键说明

    linux快捷键说明 (1)命令或目录补齐:Tab (2)遍历历史记录:history 上移:ctrl+p,下移:ctrl+n (3)光标移动 左移:ctrl+b:右移:ctrl+f:移到首部:ctr ...

  4. vue 移动端禁用安卓手机返回键

    //禁止手机返回键    下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...

  5. 如何更改sdk版本

  6. 用Visual Studio编写UDF的一点小技巧（二）

  7. JavaWeb项目启动过程与ServletContext

    ServletContext的官方名称叫Servlet上下文,服务器会为每一个工程创建一个对象,这个对象就是ServletContext.一个项目只有一个ServletContext对象,工程内的所有 ...

  8. SpringMVC（上）

    一.SpringMVC简介 (1)springMVC概述 Spring MVC属于SpringFrameWork的后续产品,Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块. 使用 ...

  9. Netty执行流程分析与重要组件介绍

    一.环境搭建 创建工程,引入Netty依赖 二.基于Netty的请求响应Demo 1.TestHttpServerHandle  处理器.读取客户端发送过来的请求,并且向客户端返回hello worl ...

  10. UltraEdit 的“查看方式”着色类项型

    UltraEdit 的“查看方式”着色类项型 2011年06月22日 13:16:00 cnki_ok 阅读数 5722   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请 ...