当鼠标悬停在 <body> 外时，IE8 仅显示背景图像

Question

我在 IE8 上遇到了一个奇怪的错误。我在特定 div 的 ::after 伪元素上有一个背景图像，它会在下拉列表为 open/closed 时发生变化。问题是：仅在 IE8 上，当我打开下拉菜单时，图像不会改变，直到我将鼠标悬停在页面区域之外。然后，显示图像。

一些图片来说明情况：

打开下拉菜单...

然后图像终于出现了

我的HTML代码:

<ul class="nav navbar-nav">
<div class="ul-title duvidas" data-toggle="collapse" data-target="#ajuda-collapse-1" aria-expanded="false">
    <div class="ul-collapse" id="topic-maquininhas">Test
         <!-- ::after goes here -->
    </div>
</div>
<div class="collapse subtopic-container" id="ajuda-collapse-1">
    <li id="subtopic-maquininhas-mensagens">
        Subtest1
    </li>
    <li id="subtopic-maquininhas-utilizacao">
        Subtest2
    </li>
    <li id="subtopic-maquininhas-servicos">
        Subtest3
    </li>
    <li id="subtopic-maquininhas-suporte">
        Subtest4
    </li>
</div>
</ul>

：在 CSS 之后（展开）

ul.active .ul-title.duvidas > .ul-collapse:after {
content: "";
float: right;
width: 16px;
height: 10px;
margin-top: 6px;
background: url(../images/sprites.png) no-repeat -118px -34px;
}

：在 CSS 之后（折叠）

.ul-title.duvidas > .ul-collapse:after {
content: "";
float: right;
width: 16px;
height: 10px;
margin-top: 6px;
background: url(../images/sprites.png) no-repeat -70px -34px;
}

Answer 1

也许这是你的问题：

In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :after.

来源：https://msdn.microsoft.com/de-de/library/cc304076(v=vs.85).aspx

编辑：这似乎是一个 IE8 错误，其中伪 :after 元素显示在您放置它的图像后面。尝试提高 :after element

的 z-index

当鼠标悬停在 <body> 外时，IE8 仅显示背景图像

IE8 only displaying background image when mouse hover out of <body>

html

javascript

css

internet-explorer-8