1

Когда ты наводишься на какой то блок/текст и он меняет, к примеру фон.

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

Когда я навожусь, блок медленно растёт в ширину, а когда убираю, он мгновенно убирается (прячется).

1 ответ 1

2

Вроде все плавно работает , ширина иметься ввиду КЛИК

#nav-header {
  width:100%;
  height: 20px;
  background: #000;
}
#nav-header hr{
    width: 0px;
    background-color: rgba(255, 0, 0, 0);
    transition: width 0.5s;
    height: 10px;
}
#nav-header:hover hr{
    width: 100%;
    background-color: rgba(255, 0, 0, 1);
}
5
  • странно очень. Но у меня он не заводится. В вашем кода - да. Плавно. Но у меня она не медлеенно возвращается на место , а очень быстро.
    – MoloF
    Commented 22 сент. 2017 в 14:43
  • jsfiddle.net/2Lqdb5do (Вот так у меня не работает) Почему, понять не могу..
    – MoloF
    Commented 22 сент. 2017 в 14:45
  • У вас там "color" не "transition" , и как "ховер" спадает , цвет "hr" сразу становиться прозрачным , поэтому кажется что ширина не плавно идет, сделайте "transition:all .4s;"
    – MoJlo4HuK
    Commented 22 сент. 2017 в 14:48
  • Спасибо большое!!!
    – MoloF
    Commented 22 сент. 2017 в 14:50
  • Бесплатный совет, не трогай <hr>, того эффект, которого хочешь добиться, судя по ссылке, используй обычный <div>...
    – Air
    Commented 22 сент. 2017 в 15:40

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.