鼠标经过图片显示文字

2014-04-23

　　<style type="text/css">
　　 img{
　　　　border:none
　　}
　　 .wrap{
　　margin:10px;
　　　　position:relative
　　}
　　 .photo a{
　　　　position:absolute;
　　　　display:block;
　　　　border:1px solid #999;
　　　　padding:2px
　　}
　　 .photo a:hover{
　　　　border:1px solid #fff;
　　　　text-decoration:none
　　}
　　 .photo a span{
　　　　display:none;
　　　　cursor:hand;
　　　　 text-align:center;
　　　font:bold 12px/30px Verdana,Arial
　 }
　　 .photo a:hover span{
　　　 width:500px;
　　　 margin:0 2px;
　　　　 background:#000;
　　　display:block;
　　　　position:absolute;
　　　bottom:0;
　　　　left:0;
　　　　color:#fff;
　　　　 filter:alpha(opacity=60);
　　　　-moz-opacity:0.6;opacity:0.6
　　}
　　 </style>

　　 <div class="wrap">
　　　　 <div class="photo">
　　　　　　<a href="#">
　　　　　　　　<img src="/jscss/demoimg/wall5.jpg" border="0"/>
　　　　　　　　<span>七七世界提供，鼠标经过图片显示文字</span>
　　　　　　</a>
　　　　</div>
　　</div>

本文关键词：鼠标经过图片显示文字图片边框浮动特效鼠标视觉同时常见效果文字