CSS-правило border-bottom не будет переходить при mouseoff, но будет при наведении

Question

Когда я пытаюсь применить переход для мыши при наведении мыши на элемент навигации, элемент использует переход только для мыши, а не mouseoff.

https://jsfiddle.net/grflint2/hp4qfma5/ имеет код для этого.Я использую transition: border-color 0.1s, padding 0.1s; на селекторе :hover и обычном, но он все еще не работает.

Я хочу, чтобы он переключался так же, как при наведении на него курсора.Почему он этого не делает?

Answer 1

изменил границу в исходном состоянии с

border-bottom: 0px solid rgba(255,255,255,0);

до

border-bottom: 4px solid transparent;

Демонстрация скрипки

Answer 2

Вы неправильно установили переход.Вы использовали слово «padding» вместо «padding-bottom».В любом случае, вы можете удалить все имена вместе и вместо этого ввести «все», поскольку они рассчитаны на одно и то же время.Так, например, вместо этого вы можете изменить строки, в которых у вас есть следующий код

      transition: border-color 0.1s, padding 0.1s;

на этот следующий код ... (я замедлил его, просто чтобы увидеть изменения)

     transition: all .5s;