css - :hover伪状态未在IE中触发

我有这个标记

<button class="toggle" aria-label="Toggle">
   <div class="globe-img"></div>
</button>

和这个SASS：

.globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
   &:hover {
     background-image: url('../images/globe-hv.png');
   }
 }

它适用于IE以外的所有最新浏览器。悬停伪状态不会在IE中触发。我在Stackoverflow上发现了许多与此有关的问题，但是它们都比较老，还没有提供解决方案（尚未），因此我认为可能值得再次提出。

请注意，两个状态都定义了背景图像。我添加了z-index并尝试了IMG标签而不是DIV。我尝试了display：block并添加了背景色。我感谢任何新的指示。如果没有其他问题，我将仅使用Javascript在悬停时添加常规CSS类。

最佳答案

由于我没有要测试的IE，我可能会错...

我猜按钮是包装纸。我假设按钮的悬停状态会破坏div的悬停状态。如果删除<button>，它可以工作吗？

或者，如果将鼠标悬停到按钮上，它是否起作用？

 .globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
 }
 button:hover .globe-img {
   background-image: url('../images/globe-hv.png');
 }