H Smith H Smith - 15 days ago 6
CSS Question

Hover over text effect

I'm very new to HTML & CSS, but here goes none the less.

I have put together this bit of code to make the text inside my navbar glow up upon hover:

li:hover {
color: orange;
cursor: default;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}


However, as soon as I remove my cursor from the text, the glow instantly disappears instead of gradually decreasing like when it lights up.

Does anyone know what I have to add in order to achieve this effect?

Cheers in advance.

Answer

Just add the transition to your li

li {
    transition: all 500ms ease;
}

You need to set transitions for all states. As with li:hover, you told the CSS to transition everything transition-able when the element is hovered. Here you tell it to transition to its normal state after the interaction as well.

https://jsfiddle.net/Kyle_Sevenoaks/L5s2h1k7/