css 悬停动画在 ie11 中不起作用。将鼠标悬停在 IE 中不起作用的元素上时的 CSS 过渡答案

【问题标题】：css hover animation is not working in ie11. CSS transition on hovering over an element not working in IEcss 悬停动画在 ie11 中不起作用。将鼠标悬停在 IE 中不起作用的元素上时的 CSS 过渡
【发布时间】：2020-04-21 16:11:29
【问题描述】：

我正在制作悬停动画。它在 Chrome Safari 和 FireFox 中运行良好。但不能在 IE 中工作。请帮忙解决这个问题

a {
      color: white;
      font-size: 13px;
      margin-right: 5px;
      transition: all 0.2s ease-in;
      display: block;
    }

    a:hover {
      margin-right: 25px;
      background: red;

    }

    a::after {
      content: url(../../images/ICON_DOWNLOAD.png);
      position: absolute;
      right: -30px;
      transition: all 0.2s ease-in;
    }

    a:hover::after {
      right: 15px;
    }

【问题讨论】：

标签： css internet-explorer hover css-transitions

【解决方案1】：

我能为您提供的唯一帮助是切换到 IE9 或更高版本。在该版本之前，不支持 :after 伪元素。在处理 IE 错误时检查支持总是一个好主意。

https://caniuse.com/#search=%3Aafter

【讨论】：

【解决方案2】：

我用 IE 11 浏览器测试了你的代码，动画效果很好。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>

<style>
a {
      color: white;
      font-size: 13px;
      margin-right: 5px;
      transition: all 0.2s ease-in;
      display: block;
    }

    a:hover {
      margin-right: 25px;
      background: red;

    }

    a::after {
      content: url(https://i.postimg.cc/c4QJc7R1/down.png);
      position: absolute;
      right: -30px;
      transition: all 0.2s ease-in;
    }

    a:hover::after {
      right: 15px;
    }
</style>
</head>
<body>
<a href="#">This is link</a>
</body>
</html>

IE 11 中的输出：

如果您使用的是任何旧版本的 IE，则建议升级到 iE 11 版本。

如果我对您的上述描述有任何误解，请告诉我，我会尽力纠正自己。

【讨论】：