Масштаб ошибки с зависанием div

Question

Im новый с HTML & CSS и это мой первый вопрос. Я попытался сделать коробку, которая весит от 1.0 до 0.8, когда вы наводите ее на мышь.

Он отлично работает, когда вы с помощью мыши посередине (0.0 между 0.8) на коробке.

Но когда вы находитесь между 0.8 и 1.0, это сходит с ума каждый раз, когда я перемещаю мышь.

Хотелось бы, чтобы шкатулка весила до 0.8, когда вы навешаете целую область 1.0 в любое время. Он должен быть уменьшен до 1.0, когда я покидаю фиксированную область 1.0. Никакой другой области. Я не могу помочь себе.

Попробуй или увидеть:https://jsfiddle.net/cyLxLbya/

видео YouTube:https://youtu.be/4MT4hrK7DVE (слева находится между 0-0,8 прямо сходит с ума от 0,8-1)

Answer 1

Проблема ваше событие прокрутки запуска и размытия, пока элемент масштабируется. Вы обнаруживаете: зависание, но когда элемент становится достаточно маленьким, он теряет его: состояние зависания и пытается снова масштабироваться. И снова (как это происходит: снова наведите курсор).

Одним из способов исправить это было бы обнаружение наведения на родительский элемент (который не масштабируется). Например: https://jsfiddle.net/cyLxLbya/1/

.box{ 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75); 
    transition: all 200ms ease; 
    transition-duration: 0.2s; 
} 

.hover:hover .box{ 
    transform: scale(0.8); 
    box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75); 
} 

Также желательно, чтобы переместить переход к самой коробке (а не зависать состояния коробки).