纯Css效果,远距离翻转效果

纯Css效果,远距离翻转效果

远距离翻转是一个鼠标停留事件,它在页面的其他地方触发显示方式的改变.实现的方式是:在锚链接内嵌套一个或多个元素;然后,使用绝对定位对嵌套的元素进行单独的定位.尽管显示在不同的地方,但是他们都包含在同一个父锚中,所以可以对同一个鼠标停留事件做出反应.因此,当鼠标停留在一个元素上时可以影响另一个元素的样式.

在这个示例中,将扩展基本的css图像映射技术，在图像下面放一个链接列表。当鼠标停留在链接上时，图像热点将突出显示。

这个示例的html与基本的css图像映射示例相视，但是，需要添加两个span:一个包围链接文本，一个空的span作为热点。这允许将链接文本定位在图像下面，将热点放在对应的图片上面。

<div id="pic">
<img src="text.png" width="454" height="340" alt="yedsky" />
<ul>
<li class="goog">
<a href="http://www.google.com/" title="Google.com">
<span class="hotspot