Unsplash

当我们在浏览网页的时候，描述性的文本通常不会跟在图片之后，而是当我们将鼠标移至图片上时，才会将文本显示出来，这样的好处是，以突显图片为主，并节省布局空间

HTML 结构如下

<div id="content">
            <img src="images/n1.jpg" width="250" height="180">
            <div class="tit">
                <p>世界上最好的</p>
                <p>Nian糕</p>
            <img src="images/n2.jpg" width="250" height="180">
            <div class="tit">
                <p>世界上最好的</p>
                <p>Nian糕</p>
            <img src="images/n3.jpg" width="250" height="180">
            <div class="tit">
                <p>世界上最好的</p>
                <p>Nian糕</p>
</div>

CSS 样式如下

*{margin:0px;padding:0px;}
#content{width:800px;height:180px;margin:200px auto 0px;border-bottom:1px solid #990033;}
#content ul{list-style:none;width:750px;height:180px;margin:auto;}
#content ul li{width:250px;height:180px;float:left;position:relative;overflow:hidden;}
#content ul li div.tit{width:250px;height:50px;left:0px;bottom:-50px;background:rgba(0,0,0,0.5);}
#content ul li div.tit p{color:#fff;text-align:center;margin:3px;font-family:"微软雅黑";}
#footer{width:800px;height:160px;}
#footer div.tel{width:100%;height:30px;color:#993300;font-size:12px;margin-left:40px;margin-top:10px;margin-bottom:20px;}
#footer div.tel p a{width:50px;height:32px;display:inline-block;vertical-align:middle;}
#footer div.detail{width:100%;height:50px;margin-left:40px;color:#993300;font-size:12px;}
#footer div.detail p{margin-top:5px;}
#footer div.detail p.curr{font-weight:bold;}
#footer div.footer-nav{width:280px;float:right;color:#993300;font-size:12px;}
#footer div.footer-nav ul li{list-style:none;float:left;margin-top:10px;}

引入 jQuery 库，通过 $(this) 获取到鼠标所悬停的 li 元素， 第一个 function 实现了鼠标悬停在上面的效果，第二个 function 实现了鼠标离开之后的效果，并调用 .animate() 方法过渡平滑

<script src="js/jquery.js"></script>
<script>
    $("#content ul li").hover(function(){//鼠标悬停在上面实现什么效果
        $(this).find("div").stop().animate({
            "bottom":"0px"
        },1000);