Как я проверяю, ли мышь по элементу в jQuery?

Спасибо вам обоим. В какой-то момент мне пришлось отказаться от попыток определить, находится ли мышь над элементом. Я знаю, что это возможно, но для выполнения может потребоваться слишком много кода.

Это заняло у меня немного времени, но я принял оба ваших предложения и придумал что-то, что подойдет мне.

Вот упрощенный (но функциональный) пример:

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

А затем заставить эту работу поработать над некоторыми текст это все, что мне нужно сделать:

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

Наряду с большим количеством причудливого CSS, это позволяет использовать несколько очень хороших всплывающих подсказок при наведении курсора. Кстати, мне нужна была задержка при наведении курсора мыши из-за крошечных промежутков между флажками и текстом, которые заставляли мигать подсказку при перемещении мыши. Но это работает как шарм.

Вы можете проверить с помощью jQuery , имеет ли какой-либо дочерний div определенный класс. Затем, применяя этот класс, когда вы наводите указатель мыши на определенный div и выводите его из него, вы можете проверить, находится ли ваша мышь над ним, даже когда вы наводите указатель мыши на другой элемент на странице. Таким образом кода гораздо меньше. Я использовал это, потому что у меня были пробелы между div во всплывающем окне, и я хотел закрыть всплывающее окно только при выходе из всплывающего окна, а не когда я наводил указатель мыши на пробелы во всплывающем окне. Поэтому я вызвал функцию наведения указателя мыши на div содержимого (всплывающее окно было закрыто), но она запускала функцию закрытия только тогда, когда я наведал курсор мыши на div содержимого И находился за пределами всплывающего окна!

$(".pop-up").mouseover(function(e)
    {
    $(this).addClass("over");
    });

$(".pop-up").mouseout(function(e)
    {
    $(this).removeClass("over");
    });


$("#mainContent").mouseover(function(e){
            if (!$(".expanded").hasClass("over")) {
            Drupal.dhtmlMenu.toggleMenu($(".expanded"));
        }
    });

This code illustrates what happytime harry and I are trying to say. When the mouse enters, a tooltip comes out, when the mouse leaves it sets a delay for it to disappear. If the mouse enters the same element before the delay is triggered, then we destroy the trigger before it goes off using the data we stored before.

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});

Продолжая сказанное в «Happytime harry», обязательно используйте jquery-функцию .data () для хранения идентификатора тайм-аута. Это сделано для того, чтобы вы могли очень легко получить идентификатор тайм-аута, когда 'mouseenter' запускается на том же самом элементе позже, что позволяет вам устранить триггер для исчезновения вашей всплывающей подсказки.

Вы можете использовать события jQuery mouseenter и mouseleave. Вы можете установить флаг, когда мышь входит в нужную область, и снять флаг, когда она покидает эту область.

Вы можете использовать событие jQuery hover для отслеживания вручную:

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!