jquery 鼠标事件在 IE8 中被 img 屏蔽 - 所有其他平台/浏览器都工作正常

Question

使用 jQuery 鼠标事件进行 mouseenter、mouseleave 或悬停都可以在除 IE8/Windows 之外的所有 Mac 或 Windows 浏览器上顺利运行。

我正在使用 mouseenter 和 mouseleave 来测试用作热点的图像上的热矩形（没有内容的绝对定位和尺寸标注），以便当光标触摸主封闭矩形（图像）的不同区域时使导航按钮可见。当光标进入或退出目标 div 之一时，Windows/IE jQuery 从不发送通知（mouseenter 我们的 mouseleave）。如果我关闭图像的可见性，一切都会按预期工作（就像在所有其他浏览器中一样），因此图像会有效地阻止所有消息（目的是让图像成为背景并且所有 div 都漂浮在其上方，可以点击它们）。

我知道存在 z-index 陷阱（因此为每个绝对定位的 div 显式指定 z-index 不起作用），但不清楚如何嵌套或排序多个 div 以允许一组 jQuery 规则支持所有浏览器。图像标签似乎胜过所有其他 div，并且总是出现在它们前面...

顺便说一句：我无法在本文中使用 img 作为标签，因此它在下面拼写为 image，因此输入编辑器不会认为我我正在尝试在 stackoverflow 上拉一个快速的...

如何使用？ “mainview”是背景图像，“zoneleft”和“zoneright”是活动区域，当光标进入导航按钮时，“左箭头”和“右箭头”应该出现在其中

。Javascript $("div#zoneleft").bind("mouseenter",function () // 进入左侧区域见左侧箭头 { arrowVisibility(“左”); document.getElementById("leftarrow").style.display="block"; }).bind("鼠标离开",函数() { document.getElementById("leftarrow").style.visibility="隐藏"; document.getElementById("rightarrow").style.visibility="hidden"; }); 超文本标记语言

<div id="zoneleft" style="position:absolute; top:44px; left:0px; width:355px; height:372px; z-index:40;">
<div id="leftarrow"     style="position:absolute; top:158px; left:0px; z-index:50;"><img src="images/newleft.png" width="59"    height="56"/></div></div>

<div id="zoneright" style="position:absolute; top:44px; left:355px; width:355px; height:372px; z-index:40;">
<div id="rightarrow" style="position:absolute; top:158px; left:296px; z-index:50;">

(tag named changed so that I could include it here)
<image src="images/newright.png" width="59" height="56" /></div></div>
</div><!-- navbuttons -->
<image id="mainview" style="z-index:-1;" src="images/projectPhotos/photo1.jpg" width:710px; height:372px; />
(tag named changed so that I could include it here)

</div><!--photo-->

Answer 1

IE8 不会在完全透明的元素或没有内容的元素上触发悬停（或鼠标事件）。

我见过的唯一解决方法是使“热点”或空元素具有背景，从而允许所有事件正常工作。我一直在做的是在 IE8 中给元素一个背景颜色，然后将其不透明度设置为 1（IE 的过滤器的不透明度为 1-100，与其他地方不同，为 0-1.0）。

.ie8 div.hit-area {

        background-color: #FFF;
        filter: alpha(opacity=1);

        }

线圈介质 - 解决方法: 无法在 Internet Explorer IE6、IE7、IE8 中单击或悬停透明链接/元素

Answer 2

您可以使 IE8 的行为像 IE7 一样，将其添加到您的 上方。标签：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 

并永远消除 IE8 带来的麻烦（只剩下 IE6）。