在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没有背景色，但是有一个1px的纯黑色边框。在Firefox中，一切都运行良好。但是在Internet Explorer中，SIAinfoBox只有在鼠标位于div的边界上时才会被填充。将其移动到div内部似乎会触发mouseleave事件，内容被删除，div被隐藏。如果我设置了背景色，它会像预期的那样工作，但是没有背景色(或透明)它就不起作用了。我也尝试过使用鼠标输入而不是鼠标悬停，但结果相同。为什么InternetExplorer表现得像那样，或者我能做些什么来实现我目前在FF中获得的结果?

Answer 1

我有类似的IE相关的问题，如这个-你可以做一个透明PNG，并设置背景为"url(images/Transparent . PNG)"-

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

Answer: style="background:url(images/transparent.png) repeat scroll 0 0 transparent"

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

Answer 2

这是一个bug，当背景是透明的，元素的"transparent"事件也是。尝试使用"has layout"(例如缩放:1)，如果没有帮助，可以在元素的背景设置透明的gif图像

Answer 3

我有过使用css样式技巧的经验

{
  zoom: 1;
}

适用于ie9，但不适用于ie10。如果你没有透明的GIF或PNG可用，如在其他一些解决方案中提到的，你也可以使用:

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

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