【WEB标准】远距离翻转

远距离翻转是一个鼠标停留事件，具体的示例如下图，在图象下面放一个链接列表。当鼠标停留在链接上时，图象
上将显示定义好的热点框

 

这个示例和CSS图象映射有些想象，同样在表皮层里要添加图片，然后用CSS的手法为图片定义热点
具体的代码如下：

表皮层代码：
<div id="pic"><img src="01085f.jpg" width="350px" height="344px" alt="图片" /><ul><li class="rich"><a href="http://www.sohu.com" title="搜狐"><span class="hotspot"></span><span class="link"> &raquo;搜狐</span></a></li></ul></div>

CSS代码：
#pic{width:350px; height:344px; position:relative;}
 #pic img{border:1px solid #000;}
 #pic ul{margin:0; padding:0; list-style:none;}
#pic a .hotspot{width:100px; height:120px; position:absolute;}
 #pic .rich a .hotspot{top:15px; left:95px;}
 #pic a .link{position:absolute; width:15em;}
 #pic .rich a .link{bottom:-2em; left:0;}
 #pic a:hover .hotspot{border:1px solid #c30}
 #pic a:hover .link{color:#0066ff; cursor:hand;}
 #pic a:hover{border:none;}  /*在IE中存在一个BUG，用这句代码来解决这个BUG*/