：通过javascript添加内容时未删除空样式

Question

我已经快速演绎了这个问题https://jsfiddle.net/chfj1jLq/2/

此代码在Chrome / Firefox中运行良好，但在IE11中无效。我有一个：我的div上的悬停选择器，但我想覆盖它，如果前一个div是空的。我写的css就是这样做的但是出于某种原因在IE中：空样式直到你第一次将鼠标悬停在div上时才被移除，然后它似乎触发了。

.A{
    background:blue;
}

.B:hover{
    background: green;
}

.A:empty + .B{
    background:black;
}