我必须创建一个用于 CD 的 html 页面。导航是带有坐标集的 HTML map 。当用户在坐标上滚动时,我希望在它旁边出现一个图像弹出窗口。有 8 个 map 链接和 8 个相应的图像弹出窗口。
我可以通过 jQuery 轻松地做到这一点,但 CD 将主要用于 IE。 IE 不允许在本地运行 javascript(没有用户交互,这是 Not Acceptable )。
通过 jQuery,我完全定位了鼠标悬停图像,但我无法通过 CSS 将它们设置为可见。解决这个问题的最佳方法是什么?
最佳答案
您总是可以基于 :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; }
希望对您有所帮助,我不得不在网上制作一张类似的 map (不使用 CD),但想在没有 JS 的情况下完成,这是最简单的方法。
注意:如果您需要提供 IE6 支持,您最好将悬停改为基于 ahref。
例如: map 文本附加弹出文本
关于css - 带有 css 翻转的 HTML map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4495314/