jQuery代码实现鼠标经过图片变成文字的效果，代码简洁。
运行的效果是：
<!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>鼠标经过图片变成文字的效果</title>
<script language="javascript" type="text/javascript" src="http://www.51mubanji.com//js/jquery.js" ></script>
<style>
html,body,form,h1,h2,h3,h4,h5,ul,dl,dt,dd,div,p,img,li{margin:0;padding:0;list-style:none;border:none;font-size:12px;}
body{text-align:center;font-family:Tahoma,Geneva,sans-serif;background:#F1F1F1;}
.list{padding-bottom:5px;padding-top:10px;overflow:hidden;zoom:1;width:676px;}
.list ul{overflow:hidden;margin:0 auto;}
.mb_list ul{background:url(/img/l247.gif);width:801px;}
.mb_list ul li{float:left;height:232px;margin:5px 65px 10px 0;width:287px;overflow:hidden;text-align:left;}
.mb_list ul li a{color:#444;font-weight:normal;}
.mb_list ul li a:hover{color:#f00;}
.mb_list a.mba{display:block;width:287px;height:187px;overflow:hidden;cursor:pointer;position:relative;padding:0;}
.mb_list h2,.mb_list h3,.mb_list a.ih3{display:block;color:#444;margin-bottom:8px;padding-left:5px;height:17px;line-height:17px;overflow:hidden;}
.mb_list a.mba img{text-align:left;padding:10px;width:268px;height:165px;background:url(/img/mblist_bg.png) no-repeat 0 0;position:absolute;left:0;}
.mb_list a.mba:hover img{background-position:0 -187px;}
.mb_list a.mba em{color:#fff;position:relative;width:248px;padding:0 10px;height:50px;text-decoration:none;line-height:25px;font-style:normal;margin-top:125px;margin-left:10px;filter:alpha(opacity=0);opacity:0;display:block;overflow:hidden;background:#2B4170;}
.mb_list a.mba:hover,.mb_list a.mba:visited{text-decoration:none;}
.mb_list a.mba:hover em{filter:alpha(opacity=80);opacity:.8;transition:.5s;-moz-transition:.5s;-o-transition:.5s;-webkit-transition:.5s;}
.mb_list a.mba span{display:block;width:268px;height:165px;position:absolute;top:10px;margin-left:10px;}
.mb_list a.mba span.new{background:url(/img/new.png) no-repeat right top;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.mb5u.com/img/new.png');_background-image:none;}
.mb_list a.mba span.hot{background:url(/img/tj.png) no-repeat right top;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.mb5u.com/img/tj.png');_background-image:none;}
.cover{ position:absolute;margin-top:2px;margin-left:2px; color:#fff;width:284px;height:180px; cursor:pointer;transition:all 0.1s ease-in;display:none; }
.cov_p,.cov_pbg{width:264px; height:130px; padding:10px;overflow: hidden; padding-top:5px; position:absolute; top:0; left:0;line-height:27px;}
.cov_pbg{ background: #0090CE;filter:alpha(opacity=85);opacity:0.85;-Moz-Opacity: 0.85; }
.cov_t,.cov_tbg {width:264px; height:35px; padding:0 10px; position:absolute; left:0; bottom:0; line-height:35px; font-family:宋体;}
.cov_tbg{background: #0090CE;filter:alpha(opacity=95);opacity:0.95;-Moz-Opacity: 0.95;}
.mb_list ul li .cover a{ color:#fff;}
.uspace{padding-right: 8px;}
.fr{ float:right;}
.cover label {margin-right:5px;
font-family: Georgia;
font-size: 17px;
font-weight: bold;
}
</style>
<script>
$(function() {
$(".mb_list .mba").hover(function() {
$(this).find(".cover").show();
},
function() {
$(this).find(".cover").hide();
});
});
</script>
</head>
<body>
<div class="list mb_list">
<ul><li><a class="ih3" href="http://www.51mubanji.com/wzmb/menhu/348.html" target="_blank">漂亮的男科医院phpcms手机网站模板下载</a>
<a href="http://www.mb5u.com/cmsmoban/99448.html" target="_blank" class="mba">
<img src="http://www.51mubanji.com/uploads/140326/1-140326111115239.jpg" alt="漂亮的男科医院phpcms手机网站模板下载">
<span class="new"></span><div class="cover" style="display: block; ">
<div class="cov_pbg"></div>
<div class="cov_tbg"></div>
<div class="cov_p">模板简介：<br> 漂亮的男科医院phpcms手机网站模板下载，网站包涵男科医院网站的首页、医院简介、来院路线、科室页面、文章页面和列表页面，
</div>
<div class="cov_t">价格：<label>120</label>元 点击：147</div>
</div>
</a>
</li><li><a class="ih3" href="http://www.51mubanji.com/wzmb/tiyu/130.html" target="_blank">货运物流行业网站模板</a>
<a href="http://www.mb5u.com/cmsmoban/99447.html" target="_blank" class="mba">
<img src="http://www.51mubanji.com/uploads/allimg/130829/1_130829204931_1-lp.jpg" alt="货运物流行业网站模板">
<span class="new"></span><div class="cover" style="display: none; ">
<div class="cov_pbg"></div>
<div class="cov_tbg"></div>
<div class="cov_p">模板简介：<br>随着电子商务的快速发展，货运物流网站越来越受欢迎。51模板集提供专业的货运物流公司的网站建设方案。给大家详细的分析货运物流网站的建设。</div>
<div class="cov_t">价格：<label>199</label>元 点击：138</div>
</div>
</a>
</li></ul>
</div>
</body>
</html>
把上面的代码保持到html就可以直接看到效果了
本文来自: 51模板集(www.51mubanji.com) 详细出处参考：http://www.51mubanji.com/wytx/jquerytx/380.html