Question

我目前有一个使用悬停图像地图的菜单，可以在Firefox，IE，Opera和Chrome中使用。但是，悬停效果在Safari中的行为并不像预期的那样。我的想法是使用图像映射和JavaScript来改变某些事物悬停时菜单的图像。在这种情况下，菜单图像会变为图像，其中悬停项目的文本为黑色。

以下是菜单设置方式的简单示例：

HTML：

<ul id="menu">
    <li class = "topLevel"><a href = "../howWeDoIt/howWeDoIt.php">How We Do It</a>
        <ul>
            <li><img id = "how" src="../img/menu/how/how.png" usemap="#menuMapHow" alt="How We Do It"/></li>                       
        </ul>

        <map name = "menuMapHow" id="menuMapHow">
        <area shape="poly" coords="37,2,104,2,136,60,103,118,37,119,3,60" alt="Publications Link" onmouseover="document.getElementById('how').src='../img/menu/how/how1.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href=../howWeDoIt/publications/publications.php />
        <area shape="poly" coords="140,63,206,63,241,122,207,180,140,180,107,121" alt="Websites Link" onmouseover="document.getElementById('how').src='../img/menu/how/how2.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href="../howWeDoIt/websites/websites.php" />
        <area shape="poly" coords="36,124,102,124,136,182,103,240,36,240,2,182" alt="Professional Development Link" onmouseover="document.getElementById('how').src='../img/menu/how/how3.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href="../howWeDoIt/professionalDevelopment/professionalDevelopment.php" />
        </map>
    </li>
</ul>

CSS：

#menu > li > ul > li{
    display: none;      
}

#menu > li:hover > ul > li{
    display: block;
    z-index: 1;
}

我目前还在托管[已删除] 托管版本会有所不同，可能仍然存在Opera的问题，因为我还没有上传更改。

Safari的问题在于，当光标进入任何图像映射的热点时，JavaScript都会被触发，但是悬停的元素会失去焦点并消失。我不确定这是Safari的怪癖还是实际的bug，但令人惊讶的是，它不会导致Chrome或我尝试过的任何其他流行浏览器出现任何问题。

如果有更简单的替代方法来获得相同的效果，即精灵或其他东西，我会很感激如何实现它的方向。

非常感谢任何帮助，谢谢。

如果这属于Web Masters区域，请道歉。

Answer 1

您是否尝试过更高的z-index值，或者将#content上的z-index设置为一个非常低的值（0）？

包含图像地图的悬停元素在Safari中失去焦点？

1 个答案: