Transition почему то не работает в обратную сторону, почему?

Question

[DmmMm]

Такое дело. Сделал я кнопки, и изменения цвета текста в них при наведении, все круто, но я решил добавить плавности
и добавил transition . При наведении все работало, но когда я убираю курсор, то обратно плавно он не изменяется.
Добавить transition в .menu пробовал, тогда он вообще не работал.
HTML:

<a href="/" id = 'buttonmain'><button class = 'menu' ><div class="txt">Главная</div> </button></a><br> 
 <a href="NewWords" id= 'buttonnew'><button class = 'menu'  ><div class="txt">Новые Слова</div> </button></a><br>
 <a href="RepeatWords" id = 'buttonrepeat'><button class = 'menu'   ><div class="txt">Повторение Слов</div> </button></a>

CSS:

body{
    background: #191917;
}
a {
    text-decoration: none;
    color: black;
}
.menu{
    font-family: "Arial Rounded MT Bold";
    font-style: inherit;
    margin-left: -60px;
    margin-top: 3px;
    border: 35px solid #4D4A52;
    width: 300px;
    border-radius: 40px;
    font-size: 25px;
    outline: 2px solid black;
    text-align: right;
    background-color: #4d4a52;
}
.menu:hover .txt{
    color: #89868e;
    transition: 1s;
}

помогите если знаете в чем проблема.

Comments

[Roman K]

джанго здесь причём?

Answer 1

[FKV]

.menu .txt{
    transition: 1s;
}
.menu:hover .txt{
    color: #89868e;
}

Comments

[DmmMm]

спасиб

Answer 2

[Антон Антон]

Добавить transition в .menu пробовал, тогда он вообще не работал.

ну так ничего удивительного. А вот если мусор убрать - то работает.
https://codepen.io/FragsterAt/pen/PoBrpNG