Как сделать плавное появление белого фона при наведении на ссылку?

Question

[paveltrty]

.menu a{
	position: relative;
	cursor: pointer;
	margin-left: 60px;
	vertical-align: text-bottom;
	font-size: 26px;
	color: #EEA320;
	display: inline-block;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color  .3s ease;
    transition: color .3s ease-in-out;
	}
.menu a:hover{
	background-color: #fff;
	color: #ff6000;
}

Comments

[WapSter]

Задайте фон transparent

Answer 1

[Рома Зварич]

Вы дважды использовали сокращенное свойство "transition", перекрыв тем самым предыдущий эффект.

Если Вы хотите указать два правила, их нужно записывать в одном свойстве "transition" через запятую


Результат:
https://codepen.io/hisbvdis/pen/mdbVRYa

Answer 2

[Олег]

Сделай через opacity
Или rgba

Comments

[WapSter]

opacity тут вреден, так как всему блоку задаёт прозрачность. Я не уверен конечно, но предполагаю, из-за того что элемент строчный, у него нет свойства прозрачного фона, и его просто нужно прописать, что бы анимации было от чего отталкиваться