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

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 没有设置背景颜色，但有 1 像素的纯黑色边框。在 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

首先没有找到他的评论，所以我将其移到此处作为答案。可以通过以下链接找到透明图像：

Answer: style="background:url(images /transparent.png) 重复滚动 0 0 透明"

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

Answer 2

这是一个错误，当背景透明时，元素对事件也是“透明”的。尝试使用“has布局”（例如zoom：1），如果没有帮助，请将背景中的透明gif图像设置为您的元素

Answer 3

我的经验是，应用 css 样式技巧

{
  zoom: 1;
}

在 IE 9 中有效，但在 IE 10 中无效。如果您没有可用的透明 GIF 或 PNG，如其他一些解决方案中提到的，您也可以使用：

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

请注意，您将需要避免在 IE 8 中应用这种样式，因为它似乎会引起问题。
“rgba”适用于 IE9 及更高版本。