纯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">点吧,点了就可以搜索东西了,呵呵!!!</span>
<span class="link">&raquo; Google.com</span>
</a>
</li>
<li class="spaces">
<a href="http://spaces.live.com/" title="Live Spaces">
<span class="hotspot">嗯,建立你的live spaces吧,如果你有就去删了吧,哈哈.</span>
<span class="link">&raquo; Live Spaces</span>
</a>
</li>
<li class="ccidnet">
<a href="http://www.ccidnet.com/" title="CcidNet">
<span class="hotspot">很牛B的it技术网站哦.ccidnet</span>
<span class="link">&raquo; CcidNet</span>
</a></li>
</ul>
</div>

基本的列表样式

#pic {
width: 454px;
height: 340px;
position: relative;
}
#pic ul {
margin: 0;
padding: 0;
list-style: none;
}

首先需要作的是将热点的position属性设置为absolute,然后指定它们的尺寸。在这俄国示例中，每个热点的尺寸相同，也可以设置不同的尺寸。与前一种技术一样，将所有锚定为到图像的左上角。然后使用top和left定位属性，将每个热点定位到图像中相关的部位。

#pic a .hotspot {
width: 100px;
height: 120px;
position: absolute; display:none;
}
#pic .goog a .hotspot { width:280px; height:100px;
top: 28px;
left: 34px;
}
#pic .spaces a .hotspot { width:140px; height:140px;
top: 170px;
left: 280px;
}
#pic .ccidnet a .hotspot { width:40px; height:40px;
top: 186px;
left: 25px;
}

同样，包含链接文本的span也进行绝对定位，并将宽度设置为15em。它们的定位也相对于包含他们的列表，在这个示例中，使用负值的底为止让列表向下排列:

#pic a .link {
position: absolute;
width: 15em;
}
#pic .goog a .link {
bottom: -2em;
left: 0;
}
#pic .spaces a .link {
bottom: -3.2em;
left: 0;
}
#pic .ccidnet a .link {
bottom: -4.4em;
left: 0;
}

热点和链接文本现在应该会出现在正确的位置上。

为了当鼠标停留在热点或文本上时在热点上实现翻转效果没，当鼠标停留在父锚上时需要在热点span上应用一个边框。

#pic a:hover .hotspot { display:block;
border: 1px solid #26354a;
background-image:url(tm.gif);
font-size:8px; font:status-bar; color:#000;
}

同样，为了当鼠标停留在文本或热点span上时改变文本颜色，当鼠标停留在父锚上时需要改变span上的样式:

#pic a:hover .link {
color: #06f;
}

效果预览地址: http://ydsky.googlegroups.com/web/RemoteRollovers.html

文中的图片位置