Как заставить JQuery .hover () работать, когда мышь покидает область просмотра? - PullRequest
Новая
       16

Как заставить JQuery .hover () работать, когда мышь покидает область просмотра?

1 голос
/ 24 марта 2011

Приведенный ниже код поместит div в самый верх порта просмотра.

Ожидаемое поведение:

Когда пользователь наводит курсор на div, затем перемещает мышь вверх докурсор находится вне области просмотра, в консоли должно быть зарегистрировано сообщение «hover out».Проблема в том, что на консоль ничего не записывается.

Как сделать так, чтобы JQuery .hover () регистрировал что-то на консоли, когда мышь покидает область просмотра? 

<body style="margin: 0; padding: 0;">
  <div class="foo" style="background-color: blue; width: 100px; height: 100px;">
    Test
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script>

    $(".foo").hover(function(){
        console.log("hover in");
    }, function(){
        console.log("hover out");
    });

   </script>

Ответы [ 2 ]

8 голосов
/ 24 марта 2011

Использование mouseover и mouseout вместо hover, кажется, исправляет это. 

$(".foo").mouseover(function(){
    console.log("hover in");
});

$(".foo").mouseout(function(){
    console.log("hover out");
});

Смотрите это в действии здесь .

Обратите внимание, что даже это не будет работать, если в окне браузера отсутствует хром.Например, когда я максимизирую FF4 или перевожу его в полноэкранный режим, край окна браузера находится на одном уровне с краем моего экрана, поэтому в таком случае курсор никуда не уходит влево от элемента div, поэтому указатель мышисобытие никогда не сработает.

3 голосов
/ 24 марта 2011

Решение состоит в том, чтобы изменить версию JQuery с 1.5.1 на 1.4.4. Не очень хорошее решение, но оно работает.

...