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

标签 jquery css internet-explorer imagemap

我有一个带有图像映射的图像,我需要用半透明的 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/

相关文章:

html - 带有评论框的文本溢出

javascript - Bootstrap-Navbar 在移动设备上看起来不一样

javascript - Internet Explorer 中的 onchange

css - IE css3 问题边框

javascript - 如何在切换 HTML 选择框值时隐藏/显示 HTML 输入框?

jquery - 具有 POST 功能的 Rails ajax : why template missing?

javascript - Jquery ajax循环并在成功函数中分配id

javascript - 在 jQuery 中使悬停重复 Action

javascript - 无限幻灯片插件不适用于背景图像

css - IE 按钮问题