探索设计与体验的融合
Fusion design exploration and experience
钟村新闻动态
News
好的钟村网络营销公司会给客户提出建设性的意见,善于对客户进行良性引导
您的位置:>> 钟村网站首页 >> 技术文章
钟村鼠标经过图片时,显示图片预览图

<style type="text/css">
<!--
.thumbnail {
 POSITION: relative
}
.thumbnail:hover {
 Z-INDEX: 50; BACKGROUND-COLOR: transparent
}
.thumbnail SPAN {
 BORDER-RIGHT: gray 1px dashed; PADDING-RIGHT: 1px; BORDER-TOP: gray 1px dashed; PADDING-LEFT: 1px; LEFT: -1000px; VISIBILITY: hidden; PADDING-BOTTOM: 1px; BORDER-LEFT: gray 1px dashed; COLOR: black; PADDING-TOP: 1px; BORDER-BOTTOM: gray 1px dashed; POSITION: absolute; BACKGROUND-COLOR: lightyellow; TEXT-DECORATION: none
}
.thumbnail SPAN IMG {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 2px; PADDING-LEFT: 2px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.thumbnail:hover SPAN {
 LEFT: 100px; VISIBILITY: visible; TOP: 0px
}
-->
</style>
其实是通过一个Style来实现的,运行速度极快,加入以上Style之后,看以下例子:

<a href="../project/2009062774813505.jpg" class=thumbnail  target="_blank" title="点击放大">2009062774813505.jpg<SPAN><IMG height=100 src="../project/2009062774813505.jpg" border=0></SPAN></a>

相关链接>>
您对此文有什么评论?
类型: 意见建议 内容报错
网友对此文的评论:
未有评论!