demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品展示</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="demo.js"></script> </head> <body> <div class="demo" > <ul> <li> <a href="http://baidu.com"> <img src="1.jpg"/> <span>学会html5 你就是赢家</span> </a> </li> <li> <a href="http://baidu.com"> <img src="1.jpg"/> <span>学会html5 你就是赢家</span> </a> </li> <li> <a href="http://baidu.com"> <img src="1.jpg"/> <span>学会html5 你就是赢家</span> </a> </li> </ul> </div> </body> </html>
demo.css
div,ul,li,dl,dt,dd {
margin:0;
padding:0;
}
ul,li,dl,dt,dd {
list-style: none;
}
.demo{
width:930px;
}
.demo ul li {
float:left;
width:300px;
margin-right: 6px;
position:relative;
}
.demo ul li img{
border:none;
position:relative;
z-index:22;
}
.demo ul li a{
width:300px;
display:block;
border:2px solid #ccc;
}
.demo ul li a:hover{
border:2px solid #C03;
}
.demo ul li a span{
position:absolute;
z-index:33;
bottom:2px;
left:2px;
width:300px;
height:40px;
filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;
background:#000;
color:#fff;
line-height:40px;
text-align:center;
display:none;
}
.demo ul li a:hover span{
display:block;
}
效果：
图片
21:32:21 2017-09-06
原文：http://www.cnblogs.com/guangzhou11/p/7487081.html