:hover 伪状态未在 IE 中触发答案

【问题标题】：:hover pseudo state not triggering in IE:hover 伪状态未在 IE 中触发
【发布时间】：2019-10-03 01:57:11
【问题描述】：

我有这个标记

<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 类。

【问题讨论】：

我看到 HTML 也是无效的 (stackoverflow.com/questions/12982269/…)，所以我应该先修复它....
您的问题是“为什么这个 Sass 不起作用”还是“为什么这个 CSS 不起作用”？如果是后者，并且您已经可以在纯 CSS 中执行此操作，请在您的问题中添加 sass 标签。否则，请分享编译后的 CSS 而不是 Sass。
潜在相关：stackoverflow.com/questions/49378906/…

标签： css internet-explorer hover

【解决方案1】：

我可能是错的，因为我没有 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');
 }

【讨论】：

是的，谢谢，我想了很多。我摆脱了内部 div 并用 span 包裹了按钮。我将 :hover 样式放在按钮上，它在所有浏览器中都能正常工作。