HTML标记

Question

我必须创建一个用于CD的html页面。导航是一个坐标设置的HTML地图。当用户滚动坐标时，我希望在它旁边显示一个图像弹出窗口。有8个地图链接和8个相应的图像弹出窗口。

我可以通过jQuery轻松完成这项工作，但CD主要用于IE。 IE不允许在本地运行javascript（没有用户交互，这是不可接受的）。

通过jQuery我绝对定位了翻转图像，但我无法通过悬停的CSS将它们设置为可见。解决这个问题的最佳方法是什么？

Answer 1

你总是可以根据Pseudo-class：hover。

尝试一些严肃的样式效果

如果不知道你的标记，我会沿着这些方向解决......

HTML标记

<div id="mapWrapper">
<ul id="map">
 <li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
 <li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
 <li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
 ....
</ul>
</div>

CSS代码

#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/

/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }

希望能帮到你，我不得不在网上使用类似的地图（不是用CD）但是想要在没有JS的情况下这样做，这是最简单的方法。

注意：如果您需要提供IE6支持，您可能最好将悬停更改为基于ahref。
例如：地图文本附加弹出文本

使用css翻转的HTML地图？

1 个答案:

HTML标记

CSS代码