Блог

Похоже, что наведение курсора jquery (и, предположительно, базовые события браузера) не может быть надежно использовано для отслеживания того, над каким элементом наведен курсор мыши, когда задействована анимация, поскольку события не запускаются, если элемент перемещается под мышью или от нее (а не мышь перемещается в элемент).

Смотрите эту скрипку для примера проблемы, с которой я сталкиваюсь. При наведении курсора мыши на div состояние в соответствии с событиями отслеживания наведения курсора всегда расходится с реальностью, по крайней мере, к концу анимации.

Я не тестировал это за пределами Chrome, но предполагаю, что во всех браузерах поведение одинаковое.

HTML:

 <div>hover me</div>
<p>state</p>
  

CSS:

 div {
    -ms-transition: -ms-transform 1s;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
}
div:hover {
    position: relative;
    -ms-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}
  

JavaScript:

 $('div').hover(function() {
    $('p').text('over');
}, function() {
    $('p').text('out');
});
  

Хотя fiddle не является реалистичным примером, я сталкиваюсь с этой проблемой на веб-странице с анимацией. У меня вопрос, как мне убедиться, что мой javascript правильно распознает состояние наведения после анимации? Я хотел бы сделать это без глобального события mousemove для следования за мышью (т. Е. Чтобы я мог искать элемент по последней координате в конце каждой анимации).