<!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. MySQL字符串函数：字符串截取

    MySQL 字符串截取函数:left(), right(), substring(), substring_index().还有 mid(), substr().其中,mid(), substr() ...

  2. 微信小程序随笔。笔记本忘家里了

    所有ui组件都有的共有属性id.class.style.hidden.data-*.bind* / catch*.

  3. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  4. C# AJAXform上传图片

     前台: @{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="vie ...

  5. Docker学习之基本概念

    Docker学习之基本概念 作为一个后端noder,不了解docker有点说不过去,这节开始,学习一些docker层面的东西. 什么是docker Docker最初是dotCloud公司创始人Solo ...

  6. [Linux]C语言Linux系统编程创建进程

    1.进程ID 每一个进程都由一个唯一的标识符表示,即进程ID,简称pid.系统保证在某时刻每个pid都是唯一的. 1.1分配进程ID 缺省情况下,内核将进程ID的最大值限制为32768,可以在此处设置 ...

  7. (二)Apache服务器的下载与安装

    PHP的运行必然少不了服务器的支持,何为服务器?通俗讲就是在一台计算机上,安装个服务器软件,这台计算机便可以称之为服务器,服务器软件和计算机本身的操作系统是两码事,计算机自身的操作系统可以为linux ...

  8. CodeForce 614B Gena's Code（水题）

    这道题提醒我两点: 1.break时一定要检查清楚 2.字符串直接赋值一定要注意结束符,最好能用strcpy 以上是debug的惨痛教训 #include <iostream> #incl ...

  9. Bash拾遗：变量

    使用引号包裹变量 在<高级Bash脚本编程指南>中的4.1节中有这么个例子: hello="A B C D" echo $hello # A B C D echo &q ...

  10. 洛谷 P2469 [SDOI2010]星际竞速 解题报告

    题目描述 10年一度的银河系赛车大赛又要开始了.作为全银河最盛大的活动之一,夺得这个项目的冠军无疑是很多人的梦想,来自杰森座α星的悠悠也是其中之一. 赛车大赛的赛场由N颗行星和M条双向星际航路构成,其 ...