Unsplash

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

HTML 结构如下

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() 方法过渡平滑

$("#content ul li").hover(function(){//鼠标悬停在上面实现什么效果

$(this).find("div").stop().animate({

"bottom":"0px"

},1000);

},function(){//鼠标离开实现什么功能

$(this).find("div").stop().animate({

"bottom":"-50px"

},1000);

});

运行结果

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

End of File

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