Исчезать содержимое, когда мышь движется и не зависает - PullRequest
Новая
       30

Исчезать содержимое, когда мышь движется и не зависает

2 голосов
/ 14 января 2011

Я пытаюсь добавить контент, когда мышь движется (аналогично тому, как это делает домашняя страница Google), однако я хочу предотвратить это поведение, если курсор мыши находится над определенным div.

Вот основы: 

$("html").hover(function() {
    $("#navigation, #content").fadeIn("slow");
});

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

$("html").one("mousemove", function() {
    if (mouseover == false) {
        $("#navigation, #content").fadeIn("slow");
    }
});

var mouseover = false;
$('#hero').mouseenter(function() {
    mouseover = true;
}).mouseleave(function() {
    mouseover = false;
});

Может быть, есть лучший способ сделать это, чем у меня здесь?

Ответы [ 3 ]

0 голосов
/ 14 января 2011

Вместо $ ('html') попробуйте $ (document), и поскольку этот элемент скрыт, попробуйте определить x и y мыши, когда она находится над элементом, поэтому, если x мыши больше или равен Элемент x и меньше или равен его ширине плюс его x, и та же логика для y, покажите его.

И не забудьте отменить событие, поэтому используйте unbind ().

0 голосов
/ 15 января 2011

Хорошо, поэтому у меня это работает в Firefox: 

var overHero = false;
$('#hero').mouseover(function() {
    overHero = true;
}).mouseleave(function(){
    overHero = false;
});

$('html').mousemove( function() {
    if (overHero == false) {
        $("#navigation, #content").fadeIn("slow");
    }
});

... но это не работает в Chrome. Chrome просто исчезает в #content сразу, независимо от того, движется мышь или нет. Если мышь находится над элементом #hero, она не исчезает (что правильно).

0 голосов
/ 14 января 2011

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

Обратите внимание, что я никогда не делал этого лично, но мое понимание пузырькового события в javascript иЦель метода stopPropagation() состоит в том, что он должен сделать именно это для вас.

...