<!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. CUBA Platform —— 开源的、可靠的企业级应用开发利器

    原文:CUBA Platform: An Open-Source Java Framework for Rapid Application Development 翻译:CUBA China CUBA ...

  2. Javad的Validator框架概述

    Java EE 6 提出了 Bean Validation 规范,使用注解的方式对 Java Bean 进行约束验证,不局限于某一层次或者某一编程模型,灵活易用.下边将向您系统的介绍该规范的各种特性. ...

  3. Orchard源码：热启动

    概述 IIS线程池中的线程数量是有限制的.当有多个长时间请求时,可能会耗尽IIS可用线程.出现503错误.在MVC中.当遇到非CPU操作的长时间请求时,MVC提供了异步方法来解决这个问题. 例:利用a ...

  4. Devexpress GridView增加CheckBox列

    参考DEV官网代码做了一个增加checkbox列效果: #region 方法:设置GridView数据绑定        public void GridDataBind()        {     ...

  5. FE面试题库

    一.HTML 序号 面试题目 难度等级 回答要点 H1 简述编写HTML需要注意哪些事项? ☆ DOCTYPE.charset.viewport.语义化.CSS与JS的位置.DOM层级.结构样式行为的 ...

  6. [javaSE] 数据结构（栈）

    栈(stack)是一种线性存储结构,有以下特点: 1.栈中数据是按照先进后出的方式进出栈的 2.向栈中添加删除元素时,只能从栈顶进行操作 使用数组实现栈 定义一个类ArrayStack 实现入栈方法p ...

  7. 撩课-Java每天5道面试题第10天

    撩课Java+系统架构 视频 点击开始学习 81.Servlet的会话机制? HTTP 是一种无状态协议, 这意味着每次客户端检索网页时, 都要单独打开一个服务器连接, 因此服务器不会记录下 先前客户 ...

  8. golang 的 sync.WaitGroup

    WaitGroup的用途:它能够一直等到所有的goroutine执行完成,并且阻塞主线程的执行,直到所有的goroutine执行完成. 官方对它的说明如下: A WaitGroup waits for ...

  9. PAT 1052. Linked List Sorting

    这场考试当年还参加了,当时直接用内置的排序了,否则自己写归并排序浪费时间啊,现在来练习一发.估计又有些节点没在链表里面,当时没考虑这个情况,所以一直有些case没过 #include <iost ...

  10. WC2017 游记

    你若安好,便是晴天. 其实本来是有一个写的比较详细的游记的……然而后来给断了,懒得补上了,简单一点好了. Day 0 早早爬起来去赶高铁…… 路上没太多可以写的……坐高铁的时候想起来了一些不开心的事情 ...