<!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 type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").hide();
$("li").hover(function(){
$(this).find("a").slideToggle(200);
});
});
</script>
<style type="text/css">
ul { list-style:none; }
li{ float:left; width:300px; height:300px; position:relative; border:1px solid #ccc; padding:2px; margin:5px; }
li img{ width:300px; height:300px; border:0px; display:block;}
a{ width:300px; height:300px; background-color:#000; FILTER: alpha(opacity=80); opacity:.8; position:absolute; left:0; bottom:0; color:#fff; text-align:center; vertical-align:middle; }
</style>
</head>
<body>
<ul>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" />
<a href="http://www.chaonanwo.com/note/115/g/87" target="_blank">
<span>代码改变世界</span><br /> <em>三石</em>
</a>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" />
<a href="http://www.chaonanwo.com/note/115/g/87" target="_blank">
<span>代码改变世界</span><br /> <em>三石</em>
</a>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" />
<a href="http://www.chaonanwo.com/note/115/g/87" target="_blank">
<span>代码改变世界</span><br /> <em>三石</em>
</a>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" />
<a href="http://www.chaonanwo.com/note/115/g/87" target="_blank">
<span>代码改变世界</span><br /> <em>三石</em>
</a>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号