Question

在我的代码中，我有一个id为'SIAinfoBox'的div，它将加载不同的细节，具体取决于鼠标当前所处的div。我将以下两个听众附加到每个相关的div：

$(annoDiv).mouseover(function(event){
                event.stopPropagation;
                $('#SIAinfoBox').empty();
                $('#SIAinfoBox').append(details);
                $('#SIAinfoBox').css('visibility','visible');
            });
$(annoDiv).mouseleave(function(event){
                event.stopPropagation;
                $('#SIAinfoBox').empty();
                $('#SIAinfoBox').css('visibility','hidden');
            });

这些div没有背景颜色设置，但有1px纯黑色边框。在Firefox中，一切运行良好。但是在Internet Explorer中，仅当鼠标位于div的边界上时才会填充SIAinfoBox。在div中移动它似乎会触发mouseleave事件，并删除内容并隐藏div。如果我设置背景颜色，它的工作方式与预期的一样，但没有背景颜色（或透明），它不起作用。我也尝试使用mouseenter而不是mouseover，但结果相同。为什么InternetExplorer表现得像那样，或者我该怎么做才能实现我目前在FF for IE中获得的结果呢？

Answer 1

我有类似的IE相关问题，比如这个 - 你可以做一个透明png并将背景设置为“url（images / transparent.png）重复滚动0 0透明“ - SmokeyPHP

没有找到他的评论，所以我把它作为答案移到这里。可以在下面的链接找到透明图像：

答案： style =“background：url（images / transparent.png）重复滚动0 0透明”

透明gif： http://www.golivetutor.com/download/spacer.gif

Answer 2

这就是bug，当背景透明时，元素“透明”也适用于事件。尝试使用“has layout”（缩放：例如1），如果它没有帮助，将背景中的透明gif图像设置为元素

Answer 3

我已经体验过应用css样式技巧

{
  zoom: 1;
}

适用于IE 9，但不适用于IE 10.如果您没有透明的GIF或PNG可供使用，如某些其他解决方案中所述，您也可以使用：

{
  background-color: rgba(0, 0, 0, 0.1);
}

请注意，您需要避免在IE 8中应用此样式，因为它似乎会导致问题。 “rgba”是available for IE9 and higher。

Mouseenter仅在IE9中透明div的边框上触发

3 个答案: