zoukankan      html  css  js  c++  java
  • jq实现鼠标经过出现上拉菜单

    <!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时,出现文字介绍

  • 相关阅读:
    Hadoop与hbase单机环境安装
    Hive集成Hbase
    正确搭建hbase完全分布式集群(二)
    正确搭建hbase完全分布式集群(一)
    zookeeper 及 独立hbase 的安装与配置
    sqoop安装及导入sqlserver数据
    hadoop+hive+sqoop安装笔记
    如何正确安装mysql 8
    安装nginx为windows服务
    python web编程之django post请求
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/6490936.html
Copyright © 2011-2022 走看看