H Smith H Smith - 1 month ago 18
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.


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.