CODEWITHSUNDEEP
cssinternet-explorerhovercss-transitions
smooth97
smooth97

Reputation: 91

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

I'm making an animation on the hover. It works fine in , Chrome Safari and FireFox. But not working in IE. please help this problem

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;
    }

Upvotes: 0

Views: 358

Answers (2)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

I tested your code with IE 11 browser and animation is working fine.

<!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>

Output in IE 11:

enter image description here

If you are using any older version of IE then it is recommended to upgrade to iE 11 version.

Let me know if I misunderstand anything from your above description, I will try to correct myself.

Upvotes: 0

jmargolisvt
jmargolisvt

Reputation: 6088

The only help I can offer you is to switch to IE9 or above. The :after psuedoelement is not supported until that version. It's always a good idea to check for support when dealing with IE bugs.

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

Upvotes: 1

Related Questions