xandri
@xandri
Люблю айтшечку

Как исправить slide up?

При наведении происходят непонятные скачки, как сделать, чтобы их не было?
Также, как сделать, чтобы при убирании курсора все возвращалось обратно плавно, а не резким скачком?
https://codepen.io/4kings/pen/xygeoN
  • Вопрос задан
  • 106 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега CSS
При наведении происходят непонятные скачки

Понятные. Изменение положения элемента .box-inner завязано на его же :hover, так что когда он уезжает из-под курсора, состояние :hover теряется, элемент откатывается назад, под курсор, снова случается :hover, элемент опять едет вверх, ну и т.д. Надо смотреть :hover у элемента, который из-под курсора никуда не девается, т.е., у родительского:

.box:hover .box-inner {
  margin-top: -360px;
}

Также, как сделать, чтобы при убирании курсора все возвращалось обратно плавно, а не резким скачком?

Аналогично - transition должен присутствовать у элемента вне зависимости от наличия состояния :hover:

.box-inner {
  transition: all 500ms ease;
}
Ответ написан
Комментировать
@skuvaWeb
Transition нужно задать блоку, а не блоку в состоянии hover. К тому же учитывайте ховер на блок родителя, потому что из-за того что блок уезжает из-под курсора, ховер состояние.
.box:hover .box-inner{
  margin-top:-360px;
  position: relative;
  box-sizing: border-box;
  transition: all 500ms ease;
}
.box-inner{
  transition: all 500ms ease;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы