Question

使用jQuery鼠标事件进行mouseenter，mouseleave或hover可以在除IE8 / Windows之外的所有Mac或Windows浏览器上游戏。

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

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

BTW：我无法在本文中使用i g作为标记，因此下面是拼写图像，因此输入编辑器并不认为我试图在stackoverflow上拉一个快速的...

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

的Javascript $（“div＃zoneleft”）。bind（“mouseenter”，function（）//进入左侧区域，见左箭头 { arrowVisibility（ “左”）; 的document.getElementById（ “LEFTARROW”）的style.display = “块”。 }）。bind（“mouseleave”，function（） { 。的document.getElementById（ “LEFTARROW”）style.visibility = “隐藏”; 的document.getElementById（ “RIGHTARROW”）style.visibility = “隐藏”。 }）; 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-->

Answer 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

Answer 2

你可以让IE8的行为像IE7一样，将其添加到<tittle> tags：

之上

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

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

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

2 个答案: