Question

我正在与（还有另一个）IE8 bug争吵。

基本上，我有一个小方形容器，里面有一个箭头，其中：before和：after pseudlelements。 HTML就是这样的：

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

那个CSS就是

.container {
    height: 58px;
    width: 58px;
    background-color: #2a5a2a;
}

.arrow {
    padding-top: 7px;
}

.arrow:before {
    margin: 0 auto;
    content: '';
    width: 0;
    border-left: 12px transparent solid;
    border-right: 12px transparent solid;
    border-bottom: 13px gray solid;
    display: block;
}

.arrow:after {
    margin: 0 auto;
    content: '';
    width: 12px;
    background-color: gray;
    height: 14px;

    display: block;
}

现在，当我将鼠标悬停在容器上时，我想让它里面的箭头改变颜色。我添加了这个CSS：

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

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

这就是问题开始的地方。这适用于大多数浏览器，但在IE8上，不会覆盖background-color属性。所以我只得到了带有新颜色的箭头的尖端，而不是制作它的“主体”的正方形。

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

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

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

如果您想尝试一下，这是一个jsfiddle：http://jsfiddle.net/Ke2S6/现在它在悬停时具有相同的容器背景颜色，因此它不适用于IE8。改变一个数字，它就会开始工作。

所以...任何想法？

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

0 个答案: