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

posted @ 2017-03-02 15:41  dongxiaolei  阅读(641)  评论(0)  编辑  收藏  举报