Рассмотрим простой элемент и связанный с ним CSS:
<div id="content">Hover me !</div>
#content {
width: 100px;
height: 100px;
}
#content:hover {
transform: translateY(500px);
transition: transform 1s 500ms;
}
Принцип прост: пока элемент завис, он должен опуститься. Проблема в том, что когда мышь не перемещается, состояние :hover сохраняется, даже если элемент физически не находится ниже мыши (из-за перевода). Состояние, похоже, обновляется только после перемещения мыши.
Обратите внимание на курсор (указатель) и его относительное положение с элементом!
Это реальная проблема, когда функция JavaScript должна выполняться, только если мышь находится на элементе, после timeout:
// The mouseleave event will not be called during the transition,
// unless the mouse move !
element.on('mouseenter', executeAfterTimeout);
element.on('mouseleave', cancelTimeout);
Итак, вот мои вопросы:
- Является ли это поведение нормальным (соответствует нормам)?
- Каковы решения, чтобы избежать этой проблемы?
Изменить: Чтобы дать вам контекст, вот что я хочу сделать конкретно: с помощью JavaScript я показываю всплывающую подсказку, когда мышь находится на элементе (и спрячьте ее, когда мышь покинет ее). Но тот же элемент может быть transform -ed, когда пользователь нажимает на него. Если пользователь просто нажимает без перемещения мыши, всплывающая подсказка останется отображаемой, что является реальной проблемой. Как я могу обнаружить, что элемент ушел?