Question

我有一个覆盖（悬停）div的以下CSS样式以防止用户交互。样式背后的逻辑是，当显示带有indicator类的div时，还会显示叠加。当indicator类的div使用display: none隐藏时，必须隐藏叠加层。这种风格在Chrome和Firfox中运行良好。但是在IE叠加div中只有在移动鼠标时才会隐藏。有时小动作就足够了。其他时候，它必须移出叠加div（注意：叠加div实际上并不隐藏整个页面）。如何在不移动IE的情况下隐藏叠加div？

div[id*='someDivId'] .indicator + .layout .overlay {
    background: #e9e9e9 url(img/spinner.gif) no-repeat 50% 50%;
    opacity: 0.3;
    z-index: 40001;
    height: 100%;
    width: 100%;
    pointer-events: inherit;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

div[id*='someDivId'] .indicator[style*="none"] + .layout .overlay {
    z-index: -1;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

请在下面找到html元素结构的概述

<!DOCTYPE html>
<html>
    <head>
        <!-- header contents -->
    </head>
    <body>
        <div id="someDivId1234567">
            <div class="indicator">
                <!-- loading indicator -->
            </div>
            <div class="layout">
                <div class="overlay"></div>
                <div>
                    <!-- contents -->
                </div>
            </div>
        </div>
    </body>
</html>

在IE（9,10和11）中使用相邻的兄弟组合器隐藏叠加div样式

0 个答案: