Internet Explorer 中模式对话框的叠加层不会阻止悬停答案

【问题标题】：Overlay for modal dialog in Internet Explorer not preventing hoverInternet Explorer 中模式对话框的叠加层不会阻止悬停
【发布时间】：2013-08-30 11:26:39
【问题描述】：

我有一个简单的模态对话框，打开时会通过 AngularJS 在页面上添加一个叠加层。

var $mask = angular.element('#tbxContainerMask').length
                                    ? angular.element('#tbxContainerMask')
                                    : angular.element('<div id="tbxContainerMask"></div>').css({
                                        width: angular.element(window).width(),
                                        height: angular.element(document).innerHeight(),
                                        display: 'none'
                                    }).appendTo('body');

这在 Chrome、Firefox、Opera 和 Safari 中可以正常工作。

 #tbxContainerMask {
     position:absolute;
     left: 0;
     top: 0;
    z-index: 10090;    
 }

模态的 zIndex 略高，为 10100。在我们使用 Internet Explorer 之前，一切都很好。覆盖显示与弹出窗口一样，但用户可以将鼠标悬停在页面区域上并弹出菜单并触发悬停效果。其他浏览器都没有这样做。如何使 IE（我使用的是 10 版，但也需要支持 8 和 9）表现得像其他浏览器一样？我希望叠加层不允许“在它下面”的项目上的悬停事件。基本上表现得像我所说的“预期”。谢谢你的帮助。我希望避免使用某种类型的处理程序来捕获覆盖上的 mouseenter 并停止传播或在覆盖上调用 blur() 等......我实际上确实尝试过，但它似乎没有用。有什么想法吗？

【问题讨论】：

我意识到这无济于事，因为 caniuse.com 说 IE 直到 11 stackoverflow.com/questions/1009753/… 才支持此功能，但我认为您可能想在 angularjs 之外进行搜索并尝试更多vanilla JS 和 HTML 代码来简化问题。
添加opacity: 0，如果元素有transparent背景色，后面的元素是可以访问的。虽然看起来你已经知道了......
@Teemu - 效果很好！谢谢。
@NLV 请记住，这仅适用于 IE，其他浏览器仍会检测到该元素。您还可以使用 CSS，将 pointer-events: none 设置为元素以将其从可检测元素中删除。
@Teemu - 在我的情况下，chrome 和 edge 按预期工作，除了 IE 之外的透明背景。不透明度设置为 0 时，所有三个浏览器都按预期工作。

标签： css internet-explorer angularjs z-index

【解决方案1】：

嗯，这很奇怪，但它似乎工作得很好。我在 css 规则中添加了不透明度和过滤器以及颜色，然后 IE 的行为符合预期。我尝试将颜色设置为透明，但它也不起作用。也许在 Internet Explorer 中应用颜色会设置某种上下文。我不知道。

#tbxContainerMask {

    position:absolute;
    left: 0;
    top: 0;
    z-index: 10090;
    opacity: 0.1;
    filter: alpha(opacity=10);
    background: #fff;

}

【讨论】：