Наведите указатель мыши на текстовый эффект

Question

Я очень новичок в HTML & CSS, но здесь идет не меньше.

я соединил этот кусок кода, чтобы сделать текст внутри моей навигационной панели светится вверх на парении:

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; 
} 

Однако, как только я удалить мой курсор из текста, свечение мгновенно исчезает вместо постепенно уменьшается, как при освещении.

Кто-нибудь знает, что мне нужно добавить для достижения этого эффекта?

Приветствия заранее.

Answer 1

Просто добавьте переход к вашему li

li { 
    transition: all 500ms ease; 
} 

Вам необходимо установить переходы для всех государств. Как и в случае с li:hover, вы сказали CSS перевести все переходные, когда элемент завис. Здесь вы говорите ему о переходе в нормальное состояние после взаимодействия.

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

Answer 2

Определите по умолчанию свойства литий перед при наведении свойств.

li { 
/*Default properties + animation*/ 
} 

li:hover { 
/*OnHover Properties + animation*/ 
} 

Теперь он будет оживлять, как вы этого хотели.

Answer 3

Вы также можете добавить цвет background:#0070ba;.

li { 
    transition: all 500ms ease; 
} 
li:hover { 
    background:#0070ba; 
    color: #fff; 
    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; 
}