JQuery 和 CSS 悬停函数解决老式图像映射 IE 问题
我有一个带有图像贴图的图像，我需要用半透明的 div 和锚点覆盖它。由于图像和图像映射逐页变化，因此实际代码会动态生成图像映射，并为覆盖的链接重用单个 div 和锚点。
您可以在 Fiddle 上查看代码的简化版本。我曾遇到过让它在 Firefox 和 IE 中运行的问题。正如现在的代码，它在两者中都有效，但是如果您将鼠标慢慢移到 IE 中黄色框的左侧，“突出显示”div 的白色背景就会被留下。 mouseleave 函数——如果你取消注释警报就可以知道——每次都会被触发，所以看来问题出在这一行：
$('#highlight').css('display', 'none');
当我将 CSS 从高亮 div 的锚点更改为高亮 div 本身时，我有Firefox 和 IE 中都存在挥之不去的 div 问题。使用突出显示 a:hover，只有 IE 才会出现这种情况，而 Firefox 则可以正常工作。
如果我将“背景颜色：白色”保留在突出显示框的内联 CSS 之外，则代码在 IE 中会失败；亮点根本不显示。
我尝试过使用许多不同的方法，包括在 a:hover 伪类和突出显示 div 本身之间切换 CSS，在 JQuery 中使用不同的函数，但没有一个在 IE 中可靠地工作。
我研究了一些 JQuery 插件，例如 MapHilight，它们会导致我必须使用的其他一些代码出现问题。
任何人都可以看到我缺少什么才能让它在 IE 以及其他浏览器中可靠地工作吗？
I have an image with an image map that I need to overlay with a semi-transparent div and anchor. Since the image and image map vary page to page, the actual code dynamically generates an image map, reusing a single div and anchor for the overlaid link.
You can see a simplified version of the code on Fiddle. I have had fits getting it to work in both Firefox and IE. As the code is now, it works in both, but if you move the mouse slowly off to the left of the yellow box in IE, the white background from the "highlight" div is left behind. The mouseleave function--as you can tell if you uncomment the alert--is triggered every time, so it appears the problem is with this line:
$('#highlight').css('display', 'none');
When I change the CSS from the highlight div's anchors to the highlight div itself,I have the lingering div problem in BOTH Firefox and IE. Using the highlight a:hover, it only happens with IE and Firefox works fine.
If I leave the "background-color: white" out of the inline CSS for the highlight box, the code fails in IE; the highlight doesn't show at all.
I've tried using a number of different approaches, including switching the CSS between the a:hover pseudoclass and the highlight div itself, using different functions in JQuery, and none work reliably in IE.
I've taken a look at some of the JQuery plugins like MapHilight, and they cause problems with some of the other code I have to use.
Can anyone see what I'm missing to get this to work reliably in IE as well as other browsers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我基本上使用了你的地图坐标并提出了 this
我总是让我的地图在边缘重叠使用相同的值，这样我就不会出现“像素无处可去”的幻象
I basically played with your map coords and came upt with this
I always let my maps overlap at the edges using the same value so I don't get a phantom "pixel to nowhere"