<!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. linux目录（转载）

    目录 1.树状目录结构图 2./目录 3./etc/目录 4./usr/目录 5./var/目录 6./proc/目录 7./dev/目录 该文章主要来自于网络进行整理. 目录结构参考地址: http ...

  2. laravel5.4学习--laravel目录结构

    Laravel目录结构分析 app目录:主要是存放自己开发的应用代码(里面主要书写 控制器和模型和路由文件) bootstrap目录:laravel启动目录 config目录:主要是存放配置文件信息 ...

  3. 三、cent OS安装配置nginx

    简介Tengine是淘宝发起的web服务器项目,简单的讲就是对nginx进行了二次开发并提供了更丰富的功能,官网地址:http://tengine.taobao.org/ 下载nginx这里使用淘宝二 ...

  4. 系统分析与设计 homework2

    1. 简述瀑布模型.增量模型.螺旋模型(含原型方法)的优缺点. 瀑布模型 优点: 降低了软件开发的复杂度,提高软件开发过程中的透明性,提高软件开发的可管理性. 为项目提供了按阶段划分的检查点. 当前一 ...

  5. golang产生guid

    labix.org/v2/mgo/bson 包虽然是MongoDB的golang实现,其中产生唯一ID的算法是独立的,不依赖MongoDB, 提炼这部分的代码如下:   package main im ...

  6. Tempter of the Bone 搜索---奇偶性剪枝

    Tempter of the Bone Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) ...

  7. slider轮播插件的多种写法

    slider轮播插件相信大家经常会用到,写法也是各种各样,大部分都是用的第三方提供的组件使用,如果想基于自己的业务特点封装个组件供自己使用的话就要自己封装组件了,网上看了大部分写法都是通过js控制do ...

  8. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

  9. 最小树形图--朱刘算法([JSOI2008]小店购物)

    题面 luogu Sol 首先设一个 \(0\) 号点,向所有点连边,表示初始价值 显然这个图的一个 \(0\) 为根的最小有向生成树的边权和就是每个买一次的最小价值 再买就一定能优惠(包含 \(0\ ...

  10. Python之面向对象继承复习

    总结:self是谁就从谁开始寻找