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

Question

我正在制作悬停动画。它在、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;
    }

Answer 1

我能给你的唯一帮助就是切换到IE9或更高版本。在该版本之前不支持 :after 伪元素。在处理 IE 错误时检查支持始终是个好主意。

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

Answer 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 版本。

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

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

css hover animation is not working in ie11. CSS transition on hovering over an element not working in IE

css

internet-explorer

hover

css-transitions