Can someone help me

Question

I wanned to make this header such as when you hover the links with the mouse they would gradually change color from white to green but the transition i tried to make it's not working.
The links change color istantly and i don't understand why.

https://code.sololearn.com/WcA1tjpGMvJZ/#

Answer 1

The solution for example as follows:
nav ul li :hover{
color: rgb(92, 247, 131);
transition: color 3s ease-in;
}

Answer 2

Thank you. Now it works but i still don't understand why it wasn't working before. Can you please explain what was i doing wrong?

Answer 3

Set the transition property on the 'a' selector.

the solution above me will work, but only on hovering.
when the mouse get out from hovering, the initial color will be back instantly, not gradually.