如何利用jQuery实现鼠标放图片上从下沿弹出文字描述呢？一般有纯CSS方法hover，只是过渡效果不好看，等熟悉了HTML+CSS知识后，可以借鉴jQuery库来实现这个功能
首先新建一个index.html文档，编写一个图片列表，我下面简单写个实例代码
<div class="show">
<ul>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo1.png" /></a><div class="title">CSDN案例博客1</div></li>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo2.png" /></a><div class="title">CSDN案例博客2</div></li>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo3.png" /></a><div class="title">CSDN案例博客3</div></li>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo4.png" /></a><div class="title">CSDN案例博客4</div></li>
</ul>
</div>下面就是开始写显示样式了，我写成横排样式
<style>
* {margin: 0;padding: 0;}
.show{ width: 900px; margin: 0px auto; margin-top: 200px; }
.show li{ width: 200px; float: left; margin-left: 10px;}
.show li img{ width: 100%; height: 170px; }
.show li .title{ font-size: 14px; line-height: 30px; text-align: center; }
</style>
咦，出现黑色圆点，差点忘了，去处理下list-style样式
再进行隐藏文字处理，完整CSS样式文件
<style>
* {margin: 0;padding: 0;}
ul,li{ list-style:none;}
.show{ width: 900px; margin: 0px auto; margin-top: 200px; }
.show li{ width: 200px; height: 170px; float: left; margin-left: 10px; position: relative;}
.show li img{ width: 100%; height: 170px; }
.show li .title{ width: 100%; height:40px; font-size: 14px; line-height: 40px; text-align: center; background-color: rgba(11,11,11,1.00); color: rgba(255,255,255,1.00); position: absolute; bottom: 0px; left:0; display: none;}
</style>
下面开始引入jQuery库了
最后一步，就是编写控制脚本了
下面我把所有代码贴出来
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片文字描述</title>
<style>
* {margin: 0;padding: 0;}
ul,li{ list-style:none;}
.show{ width: 900px; margin: 0px auto; margin-top: 200px; }
.show li{ width: 200px; height: 170px; float: left; margin-left: 10px; position: relative;}
.show li img{ width: 100%; height: 170px; }
.show li .title{ width: 100%; height:40px; font-size: 14px; line-height: 40px; text-align: center; background-color: rgba(11,11,11,1.00); color: rgba(255,255,255,1.00); position: absolute; bottom: 0px; left:0; display: none;}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="show">
<ul>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo1.png" /></a><div class="title">CSDN案例博客1</div></li>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo2.png" /></a><div class="title">CSDN案例博客2</div></li>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo3.png" /></a><div class="title">CSDN案例博客3</div></li>
<li><a target="_blank" href=""><img alt="CSDN案例博客" src="images/demo4.png" /></a><div class="title">CSDN案例博客4</div></li>
</ul>
</div>
<script type="text/javascript">
$(".show li").each(function(){
var self = $(this);
self.mouseover(function(){
self.find(".title").show();
}).mouseout(function(){
self.find(".title").hide();
});
});
</script>
</body>
</html>
完工了，是不是很简单呢？
