在線體驗效果：http://hovertree.com/texiao/jquery/2.htm
以下是源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery圖片列表鼠標經過遮罩顯示文字 - 何問起</title><base target="_blank" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{color:#898989;font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
a{color:#898989;text-decoration:none}
a:hover{cursor:pointer;color:#9f8054;}
/* hovertree_img */
.hovertree_img{width:981px;height:382px;overflow:hidden;border:1px solid #dcdcdc;padding:3px;margin:40px auto 0 auto;}
.hovertree_img dt{margin-right:3px;float:left;display:inline;width:315px;height:382px;position:relative;overflow:hidden;}
.hovertree_img dd{float:left;position:relative;overflow:hidden;}
.hovertree_img_dd1{width:196px;height:382px;float:left;margin-right:3px;display:inline;}
.hovertree_img_dd1 dd{height:125px;overflow:hidden;float:left;}
.hovertree_img_dd1 #dd2{margin:3px 0px 4px 0;}
.hovertree_img_dd2{float:left;width:464px;height:382px;overflow:hidden;}
.hovertree_img_dd2 dd{margin-right:3px;height:207px;overflow:hidden;display:inline;}
.hovertree_img_dd2 dd#dd3, .hovertree_img_dd2 dd#dd4{margin:0;}
.hovertree_img_dd2 dd#dd3, .hovertree_img_dd2 dd#dd5{margin-bottom:3px;height:172px;}
.hovertreebox{width:100%;height:100%;background:url(2/images/sgw_bg.jpg) no-repeat left top #020000;position:absolute;left:0;line-height:18px;color:#e69714;top:-382px;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;text-align:center;padding-top:30px;}
.hovertreebox h3{color:#fff;font-size:14px;font-weight:bold;}
.hovertreebox a{display:block;margin-top:5px;}
.hovertree_img dt .hovertreebox{padding-top:100px;top:-482px;}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hove'+'rtree_img dt').hover(function(){
$(this).children('.hovertreebox').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
$(this).children('.hovertr'+'eebox').stop(true,true).animate({'top':-482,opacity:0},200);
})
$('.hovertree_img dd').hover(function(){
$(this).children('.hovertreebox').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
$(this).children('.hovertreebox').stop(true,true).animate({'top':-382,opacity:0},200);
})
})
</script>
</head>
<body>
<div style="width:768px;margin:2px auto;"><h3>jQuery圖片列表鼠標經過遮罩顯示文字</h3>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">原文</a> <a href="http://hovertree.com/texiao/">更多特效</a>
<br />
請移動光標到圖片上</div>
<dl class="hovertree_img">
<dt>
<img src="http://hovertree.com/texiao/jquery/2/images/t1.png" width="315" height="382"/>
<div class="hovertreebox">
<h3>揭秘化妝水四大隱藏功效</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dt>
<div class="hovertree_img_dd1">
<dd>
<img src="http://hovertree.com/texiao/jquery/2/images/t2.png" width="196" height="125"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
<dd id="dd2">
<img src="http://hovertree.com/texiao/jquery/2/images/t3.png" width="196" height="126"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
<dd>
<img src="http://hovertree.com/texiao/jquery/2/images/t4.png" width="196" height="125"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
</div>
<div class="hovertree_img_dd2">
<dd id="dd5">
<img src="http://hovertree.com/texiao/jquery/2/images/t5.png" width="284" height="172"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
<dd id="dd3">
<img src="http://hovertree.com/texiao/jquery/2/images/t6.png" width="176" height="172"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
<dd>
<img src="http://hovertree.com/texiao/jquery/2/images/t7.png" width="152" height="207"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
<dd>
<img src="http://hovertree.com/texiao/jquery/2/images/t8.jpg" width="152" height="207"/>
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
<dd id="dd4">
<img src="http://hovertree.com/texiao/jquery/2/images/t9.png" width="152" height="207" />
<div class="hovertreebox">
<h3>標題</h3>
<p>介紹...</p>
<a href="http://hovertree.com/">查看詳細</a>
</div>
</dd>
</div>
</dl>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a></p>
</div>
</body>
</html>