时间戳

首页 > 解决方案 > :hover 伪状态未在 IE 中触发

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

标签： cssinternet-explorerhover

解决方案

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

推荐阅读