<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .clearfix{

            zoom: 1;

        }

        .clearfix:after{

            content:".";

            display:block;

            width:0;

            height:0;

            visibility: hidden;

            overflow:hidden;

        }

        ul,li{

            list-style:none;

        }

        img{

            border:none;

            vertical-align:middle;

        }

        a{

            text-decoration: none;

            color:#333;

        }

        .list li{

            float:left;

            width:162px;

            height:162px;

            position: relative;

            overflow:hidden;

            border:1px solid #ccc;

            margin-right:10px;

        }

        .list-t,.list-b{

            width:100%;

            height:100%;

        }

        .list-t{

            z-index:9;

        }

        .list-t img{

            width:100%;

            height:100%;

        }

        .list-b{

            z-index:999;

            position:absolute;

            top:162px;

            left:0;

            background:#a3d39c;

        }

    </style>

</head>

<body>

<ul class="list clearfix">

    <li>

        <a href="javascript:void(0);">

            <div class="list-t">

                <img src="service-wd.png" alt=""/>

            </div>

            <div class="list-b">

                123456

            </div>

        </a>

    </li>

    <li>

        <a href="javascript:void(0);">

            <div class="list-t">

                <img src="service-wd.png" alt=""/>

            </div>

            <div class="list-b">

                123456

            </div>

        </a>

    </li>

    <li>

        <a href="javascript:void(0);">

            <div class="list-t">

                <img src="service-wd.png" alt=""/>

            </div>

            <div class="list-b">

                123456

            </div>

        </a>

    </li>

    <li>

        <a href="javascript:void(0);">

            <div class="list-t">

                <img src="service-wd.png" alt=""/>

            </div>

            <div class="list-b">

                123456

            </div>

        </a>

    </li>

    <li>

        <a href="javascript:void(0);">

            <div class="list-t">

                <img src="service-wd.png" alt=""/>

            </div>

            <div class="list-b">

                123456

            </div>

        </a>

    </li>

</ul>

</body>

<script src="../jquery-1.11.3.min.js"></script>

<script>

    var timer;

    $(".list li").hover(function(){

        clearTimeout(timer);

        var $this=$(this);

        timer=window.setTimeout(function(){

            $this.find(".list-b").animate({"top":0});

        },300)

    },function(){

        clearTimeout(timer);

        $(this).find(".list-b").animate({"top":"162px"});

    })

</script>

</html>

鼠标经过li时，出现文字介绍

jq实现鼠标经过出现上拉菜单的更多相关文章

  1. Ionic Js一：上拉菜单(ActionSheet)

    上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. HTML 代码 <b ...

  2. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  3. ionic-Javascript：ionic 上拉菜单(ActionSheet)

    ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...

  4. Android 上滑上拉菜单SlidingDrawer 不全屏显示的方法

    这里来说一个已经被废弃的SlidingDrawer.. 他可以实现上拉,下拉的菜单. 但是有个问题就是上拉以后,是全屏显示的. 首先 写一个布局: <RelativeLayout xmlns:a ...

  5. ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑

    闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...

  6. bootstrap 导航栏鼠标悬停显示下拉菜单

    在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...

  7. ionic 上拉菜单(ActionSheet)安装和iOS样式不一样

    ISO中的界面是这样的: 然而,Android中的界面是这样的: 代码如下: HTML部分: <body ng-app="starter" ng-controller=&qu ...

  8. iOS 程序进入后台，包含用户上拉快捷菜单导致程序失去活跃的研究

    今日在使用某App时候,突然发现上拉菜单.程序视频扔在播放,咦!引起了我的兴趣. 首先,列出两个方法, 第一个方法是AppDelegate的代理.当程序进入后台时候调用 - (void)applica ...

  9. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. IIS 站点 共享目录

    1.先建立站点,再设置文件夹为共享,Everyone 2.Mac电脑 Everyone不能访问,必须建立用户

  2. LINQ-from多from

    简: LINQ全称是Language  Integrated Query,中文“语言集成查询”.LINQ是一种查询技术,有LINQ toSQL.LINQ to Object. LINQ to ADO. ...

  3. MVC官方教程索引

    1.MVC教程首页http://www.asp.net/learn/mvc/?lang=cs 2.MVC概况2.1创建一个基于数据库的"电影"web应用http://www.asp ...

  4. ASP.NET之Jquery入门级别

    1.Jquery的简单介绍 1)Jquery由美国人John Resig创建.是继prototype之后又一个优秀的JavaScript框架. 2)JQuery能做什么?JQuery能做的普通的Dom ...

  5. <a>标签中href="javascript:;"的意思

    <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. 这里的href=&q ...

  6. Redis-Map

    Redis Map 存储K-V键值对.(跟Java的Map类比) 哈希表结构: typedef struct dictht { dictEntry **table;  //哈希表数组 unsigned ...

  7. Luogu4191：[CTSC2010]性能优化

    传送门 题目翻译:给定两个 \(n\) 次多项式 \(A,B\) 和一个整数 \(C\),求 \(A\times B^C\) 在模 \(x^n\) 意义下的卷积 显然就是个循环卷积,所以只要代入 \( ...

  8. 理解webpack4.splitChunks

    一.前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的,现在正好有时间打算好好了解一下,看了官方文档也陆陆续续的看了看网上别人写的文章,感觉大部分都是将官方文档翻译了一遍,很多问题 ...

  9. 获取所有后缀DDE打开命令

    概述: 由于需要使用DDE方式打开文件,所以把支持DDE方式打开文件的参数都导出来到文件,方便查找. 并且提供运行DDE命令的工具,可以用于测试DDE功能. 1.运行脚步GetDDE.vbs可以获取系 ...

  10. 引入 Tinker 之后如何在 Debug 模式下开启 Instant Run

    在<Tinker + Bugly + Jenkins 爬坑之路>一文中讲了在接入 Tinker 之后,Jenkins 中的一些坑,由此,热修复算告一段落,但是,在直接 Run 模式运行时, ...