Когда ты наводишься на какой то блок/текст и он меняет, к примеру фон.
:hover {background-color: rgba(0,0,0,0.3);}
Но это когда мы наводимся. А нужно, когда ты убираешь мышку, это плавно на место возвращалось. К примеру, у меня есть <hr>
У него есть ширина width: 100px;
, когда я на него наведусь, значение width
будет 200px
, так вот, мне нужно чтобы когда я убирал мышку, это значение менялось так же плавно как и transition
у <hr>
Вот чисто кусок кода для ясности :
#nav-header hr{
width: 0px;
background-color: rgba(255, 0, 0, 0);
transition: width 0.5s;
}
#nav-header:hover hr{
width: 100%;
background-color: rgba(255, 0, 0, 1);
}
Когда я навожусь, блок медленно растёт в ширину, а когда убираю, он мгновенно убирается (прячется).