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

【问题标题】：jquery mouse events masked by img in IE8 - all other platforms/browsers work fine在 IE8 中被 img 屏蔽的 jquery 鼠标事件 - 所有其他平台/浏览器都可以正常工作
【发布时间】：2010-02-20 19:42:02
【问题描述】：

将 jQuery 鼠标事件用于 mouseenter、mouseleave 或 hover 在所有 Mac 或 Windows 浏览器（IE8/Windows 除外）上都可以正常工作。

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

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

顺便说一句：我不能在这个文本中使用 i m g 作为标签，所以它在下面拼写为 image，所以输入编辑器不认为我试图在 stackoverflow 上拉一个快速的...

怎么用的？ “mainview”是背景图像，“zoneleft”和“zoneright”是当光标进入导航按钮“leftarrow”和“rightarrow”应该出现的活动区域。

Javascript $("div#zoneleft").bind("mouseenter",function () // 进入左区见左箭头 { 箭头可见性（“左”）； document.getElementById("leftarrow").style.display="block"; }).bind("mouseleave",function() { document.getElementById("leftarrow").style.visibility="hidden"; document.getElementById("rightarrow").style.visibility="hidden"; }); HTML

<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-->

【问题讨论】：

您是否指定了正确的文档类型？
您可以尝试发布一个示例。

标签： javascript jquery internet-explorer mouse z-index

【解决方案1】：

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

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

.ie8 div.hit-area {

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

        }

Coil Media - Workaround: Can Not Click or Hover Transparent Links/Elements in Internet Explorer IE6, IE7, IE8

【讨论】：

【解决方案2】：

你可以让 IE8 表现得像 IE7，在你的 <tittle> tags 上方添加这个：

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

用 IE8 永远停止你的头痛（只剩下 IE6）。

【讨论】：