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

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.

CodePudding user response：

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>