鼠标经过显示隐藏图片

HTML代码
<a class="thumbnail"  href="img" >图片名称<span ><img src="$imgPath "></span ></a >

CSS 代码:

.thumbnail{
position:   relative;
z-index:   0;
}
.thumbnail:hover{
background-color:   transparent;
z-index:   50;
}
.thumbnail   span{   /*CSS   for   enlarged   image*/
position:   absolute;
background-color:   lightyellow;
padding:   5px;
left:   -1000px;
border:   1px   dashed   gray;
visibility:   hidden;
color:   black;
text-decoration:   none;
}
.thumbnail   span   img{   /*CSS   for   enlarged   image*/
border-width:   0;
padding:   2px;
}
.thumbnail:hover   span{   /*CSS   for   enlarged   image   on   hover*/
visibility:   visible;
top:   -30px;
left:   60px;   /*position   where   enlarged   image   should   offset   horizontally   */
}

相关日志

0 Comments

Leave a Reply

Using Gravatars in the comments - get your own and be recognized!

XHTML: These are some of the tags you can use: <a href=""> <b> <blockquote> <code> <em> <i> <strike> <strong>