JavaScript 鼠标悬停图片，显示隐藏文本

Unsplash

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

HTML 结构如下

<div id="content">
    <ul>
        <li>
            <img src="images/n1.jpg" width="250" height="180">
            <div class="tit">
                <p>世界上最好的</p>
                <p>Nian糕</p>
            </div>
        </li>
        <li>
            <img src="images/n2.jpg" width="250" height="180">
            <div class="tit">
                <p>世界上最好的</p>
                <p>Nian糕</p>
            </div>
        </li>
        <li>
            <img src="images/n3.jpg" width="250" height="180">
            <div class="tit">
                <p>世界上最好的</p>
                <p>Nian糕</p>
            </div>
        </li>
    </ul>
</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;position:absolute;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);                
    },function(){//鼠标离开实现什么功能
        $(this).find("div").stop().animate({
            "bottom":"-50px"
        },1000);
    });
</script>

运行结果

本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^