Why CSS transition doesn't work when we move mouse away?

Question

I was facing one issue all the time. For example we have the following HTML code:

li:hover{
    color:rgb(73, 207, 248);
    transition: 1s;
}

Color changes with transition when we move mouse on it, but when we move away, transition does't work, and changes happen immediately.

Can someone help me please why is this happening? Thank you in advance.

You need to set `transition: 1s;` on `li` element before `:hover`. — Raeesh Alam, Mar 08 '22 at 04:10

score 2 · Accepted Answer · answered Mar 08 '22 at 04:05

Because you set the transition property with :hover, your element only has the transition property when you hover. It's just as straightforward as this. You need to give the li element your transition property and only set the color on the selector that uses :hover.

li:hover{
    color:rgb(73, 207, 248);
}

li {
  transition: 1s;
}

<li></li>

Why CSS transition doesn't work when we move mouse away?

1 Answers1