用于老式图像映射 IE 问题的 JQuery 和 CSS 悬停函数

Question

我有一个带有图像映射的图像，我需要用半透明的 div 和锚点覆盖它。由于图像和图像映射因页面而异，实际代码会动态生成图像映射，重用单个 div 和覆盖链接的锚点。

您可以在Fiddle 上查看代码的简化版本。我已经很适合让它在 Firefox 和 IE 中工作。就像现在的代码一样，它适用于两者，但是如果您将鼠标慢慢移到 IE 中黄色框的左侧，则“突出显示” div 的白色背景将被留下。每次都会触发 mouseleave 函数（您可以知道是否取消注释警报），因此问题似乎出在这一行：

$('#highlight').css('display', 'none');

当我将 CSS 从高亮 div 的锚点更改为高亮 div 本身时，我在 Firefox 和 IE 中都遇到了挥之不去的 div 问题。使用突出显示 a:hover，它只发生在 IE 和 Firefox 上工作正常。

如果我将“background-color: white”留在高亮框的内联 CSS 之外，则代码在 IE 中会失败；突出显示根本不显示。

我尝试了许多不同的方法，包括在 a:hover 伪类和高亮 div 本身之间切换 CSS，在 JQuery 中使用不同的函数，但没有一个在 IE 中可靠工作。

我查看了一些 JQuery 插件，例如 MapHilight，它们会导致我必须使用的其他一些代码出现问题。

谁能看到我缺少什么才能让它在 IE 和其他浏览器中可靠地工作？

Answer 1

我基本上是在玩你的地图坐标并想出了this

我总是让我的地图使用相同的值在边缘重叠，这样我就不会得到一个幻影“像素无处”