我有一个带有图像映射的图像,我需要用半透明的 div 和 anchor 覆盖它。由于图像和图像映射因页面而异,因此实际代码会动态生成图像映射,为重叠链接重复使用单个 div 和 anchor 。
您可以在 Fiddle 上查看代码的简化版本.我已经适应了它在 Firefox 和 IE 中的工作。正如现在的代码一样,它在两者中都有效,但是如果您将鼠标慢慢移到 IE 中黄色框的左侧,则会留下“突出显示”div 的白色背景。每次都会触发 mouseleave 函数——正如您可以判断是否取消注释警报一样——所以问题似乎出在这一行:
$('#highlight').css('display', 'none');
当我将 CSS 从高亮 div 的 anchor 更改为高亮 div 本身时,我在 Firefox 和 IE 中都遇到了挥之不去的 div 问题。使用高亮 a:hover,它只发生在 IE 和 Firefox 上工作正常。
如果我在高亮框的内联 CSS 中保留“background-color: white”,代码在 IE 中会失败;突出显示根本不显示。
我尝试过使用多种不同的方法,包括在 a:hover 伪类和突出显示 div 本身之间切换 CSS,在 JQuery 中使用不同的函数,但没有一种方法在 IE 中可靠地工作。
我看过一些 JQuery 插件,例如 MapHilight,它们会导致我必须使用的其他一些代码出现问题。
谁能看出我缺少什么才能让它在 IE 和其他浏览器中可靠地工作?
最佳答案
我基本上是在玩你的 map 坐标并想出了 this
我总是让我的 map 使用相同的值在边缘重叠,这样我就不会得到“无处像素”的幻影
关于用于老式图像映射 IE 问题的 JQuery 和 CSS 悬停功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4127632/