鼠标放上去- -显示透明层
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>鼠标放上去- -显示透明层</title> <style type="text/css"> div,ul,li,dl,dt,dd{ margin:0; padding:0; } ul,li,dl,dt,dd{ list-style:none; } .demo{ margin:0 auto; 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); opacity: 0.5; -moz-opacity:0.5; -khtml-opacity:0.5; -webkit-opacity:0.5; background:#000; color:#fff; line-height:40px; text-align:left; display:none; } .demo ul li a:hover span{ display:block; } img{ width: 100%; } </style> </head> <body> <div class="demo"> <ul> <li> <a href="javascript:void(0)"> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" /> <span>学会html5 绝对的屌丝逆袭</span> </a> </li> <li> <a href="javascript:void(0)"> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg" /> <span>圆角水晶按钮制作</span> </a> </li> <li> <a href="javascript:void(0)"> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg" /> <span>8小时助你攻下html与css样式代码</span> </a> </li> </ul> </div> </body> </html>
效果图：
