<!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>
利用jQuery实现图片列表鼠标放上去显示图片内容描述
需积分: 10 116 浏览量
2022-12-13
14:56:07
上传
评论
收藏 3.63MB RAR 举报
利用jQuery实现图片列表鼠标放上去显示图片内容描述.rar （6个子文件） 
利用jQuery实现图片列表鼠标放上去显示图片内容描述 
jquery.min.js 84KB images 
demo2.png 651KB demo3.png 1.15MB demo4.png 1.32MB demo1.png 505KB
index.html 1KB资源评论
