<!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. java并发编程（10）Fork/Join

    Fork/Join JAVA7中出现的Fork/Join,类似于分布式文件系统hadoop的mapreduce思想,就是将任务分割,再分割,直到分割到满足条件 为了便于理解:编程逻辑可以借用 递归的思 ...

  2. [转]OData and Authentication – Part 5 – Custom HttpModules

    本文转自:https://blogs.msdn.microsoft.com/odatateam/2010/07/19/odata-and-authentication-part-5-custom-ht ...

  3. Node.js创建第一个应用

    在我们创建 Node.js 第一个 "Hello, World!" 应用前,让我们先了解下 Node.js 应用是由哪几部分组成的: 引入 required 模块:我们可以使用 r ...

  4. PictureBox控件

    PictureBox控件可以显示来自位图.图标或者元文件,以及来自增强的元文件.JPEG.GIF文件的图形,如果控件不足以显示整幅图像,则裁剪图像以适应控件的大小. Sizemode 图片的大小方式 ...

  5. SQL Server中的流控制语句

    begin···end 该语句定义sql代码块,通常在if和while语句中使用 declare @num int ; ; begin ; print 'hello word' end if···el ...

  6. 使用重绘项美化WinForm中的控件

    如果你觉得项目中的ComboBox.ListBox或其它的Winforms控件不能满足你的显示要求,包括窗体在内很多控件都支持重绘修改显示样式.下面的示例完成对ComBox数据项的重绘,希望能起到抛砖 ...

  7. JSONObject与null

    前言 今天在写代码的时候发现在 JSON 中 由于put了key对应的value为null,结果这个JSON键值对没有输出 org.json.JSONObject 在orgJSON 中,如果直接put ...

  8. 撩课-Mysql详解第3部分sql分类

    学习地址:[撩课-JavaWeb系列1之基础语法-前端基础][撩课-JavaWeb系列2之XML][撩课-JavaWeb系列3之MySQL][撩课-JavaWeb系列4之JDBC][撩课-JavaWe ...

  9. golang 编码转化

    在网上搜索golang编码转化时,我们经常看到的文章是使用下面一些第三方库: https://github.com/djimenez/iconv-go https://github.com/qiniu ...

  10. 【echats】echats悬浮事件频繁触发、过于灵敏、快速抖动等异常现象，适用与tooltip有关

    方案:transitionDuration设为0: 如图,发现关闭tooltip后现象消失,猜测与tooltip有关. 经过仔细观察,鼠标在快速移动时tooltip会延迟移动,就是这个时间差,让鼠标悬 ...