Css IE8中伪元素悬停的背景色

我正在与（另一个）IE8 bug作斗争

基本上，我有一个小的方形容器，里面有一个箭头，用：before和：after伪元素构建。HTML是这样的：

<div class="container">
    <div class="arrow" />
</div>​

现在，当我将鼠标悬停在容器上时，我希望其中的箭头改变颜色。我添加了这个CSS：

.container:hover .arrow:after {
    background-color: white;
}

.container:hover .arrow:before {
    border-bottom-color: white;
}​

这就是问题的开始。这在大多数浏览器上都适用，但在IE8上，背景颜色属性不会被覆盖。所以我只得到了新颜色的箭头尖端，而不是构成“主体”的正方形

为了让事情变得更有趣，如果我添加以下内容，同时将容器背景颜色更改为稍微不同的颜色，那么一切都开始工作，箭头的背景颜色也会更改

.container:hover {
    background-color: #2a5a2b;
}

如果我只为容器设置了：hover状态，并且设置了它已经具有的相同背景色，那么它就不起作用。如果我想改变背景颜色，我必须改变它

如果您想试试，这里有一个JSFIDLE：现在它与悬停时的容器具有相同的背景色，因此它在IE8上不起作用。更改一个位数，它将开始工作

---

所以。。。有什么想法吗？

我知道这会增加难看的污点，但是你能把

.container

放在它自己的容器中，然后在悬停时改变容器的（隐藏）背景吗？似乎这会迫使浏览器重新绘制，除非Triton够了。。。东西。。。计算是否会有任何变化。当然，按照这种速度，您可以将

.container

的容器设置为具有相同的背景，并使

.container

在悬停时将其背景更改为透明。没有一台剩下IE8的电脑，所以我无法测试。我现在也没有IE8，但我同意它可能会修复它。在我的例子中，我们在项目中使用SASS，所以我只是将

.container

的背景色提取为一个变量，并将其设置为悬停，但增加了一个，这样就可以在不更改标记的情况下完成任务。我想这只是我们必须面对的另一个bug，并为每种情况找到最合适的解决方法。

.container:hover {
    background-color: #2a5a2b;
}