Установите таймаут для исчезновения курсора мыши и сохраните возвращаемое значение в данных в объекте. Затем onmouseover отмените тайм-аут, если в данных есть значение.

Удалите данные о обратном вызове затухания.

На самом деле использовать mouseenter / mouseleave дешевле, потому что они не запускаются для меню, когда дочерние элементы mouseover / mouseout запускаются.

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

$("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); 
});

Чистая и элегантная проверка при наведении:

if ($('#element:hover').length != 0) {
    // do something ;)
}

ВНИМАНИЕ: is(':hover') устарел в jquery 1.8+. См. этот пост для решения .

Вы также можете использовать этот ответ: https://stackoverflow.com/a/6035278/8843, чтобы проверить, работает ли мышь навести на элемент:

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

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

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

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

Мне нужно было что-то именно такое (в немного более сложной среде и решение с большим количеством «mouseenters» и «mouseleaves» не работало должным образом), поэтому я создал небольшой плагин jquery, который добавляет метод ismouseover. До сих пор это работало довольно хорошо.

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

Затем в любом месте документа вызовите его так, и он вернет истину или ложь:

$("#player").ismouseover()

Я тестировал его в IE7 +, Chrome 1+ и Firefox 4, и он работает нормально.

В jQuery вы можете использовать .is (': hover'), поэтому

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

теперь будет наиболее кратким способом предоставления функции, запрошенной в OP.

Примечание. Приведенное выше не работает в IE8 или более ранней версии.

В качестве менее сжатой альтернативы, которая работает в IE8 (если я могу доверять режиму IE9 IE8), и делает это без запуска $(...).hover(...) повсюду и не требует знания селектора для элемента (в этом случае ответ Ivo проще):

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

Я взял идею SLaks и обернул ее в небольшой класс.

function HoverWatcher(selector){
  this.hovering = false;
  var self = this; 

  this.isHoveringOver = function() { 
    return self.hovering; 
  } 

    $(selector).hover(function() { 
      self.hovering = true; 
    }, function() { 
      self.hovering = false; 
    }) 
} 

var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');



$('#container').click(function() {
  alert("box1.hover = " + box1Watcher.isHoveringOver() +
        ", box2.hover = " + box2Watcher.isHoveringOver());
});

ТОЛЬКО К СВЕДЕНИЮ для будущих искателей этого.

Я сделал плагин jQuery, который может делать это и многое другое. В моем плагине, чтобы получить все элементы, над которыми в данный момент наведен курсор, просто выполните следующие действия:

$.cursor("isHover"); // will return jQ object of all elements the cursor is 
                     // currently over & doesn't require timer

As I mentioned, it also has alot of other uses as you can see in the

jsFiddle найден здесь

Поскольку я не могу комментировать, я напишу это как ответ!

Пожалуйста, поймите разницу между селектором CSS ": hover" и событием зависания!

": hover" является селектором css и действительно был удален вместе с событием при таком использовании $("#elementId").is(":hover"), но в этом смысле он не имеет ничего общего с наведением курсора на событие jQuery.

если вы закодируете $("#elementId:hover"), элемент будет выбран только при наведении курсора мыши. Вышеупомянутый оператор будет работать со всеми версиями jQuery, поскольку вы выбираете этот элемент с чистым и допустимым выбором css.

С другой стороны, событие зависания, которое

$("#elementId").hover(
     function() { 
         doSomething(); 
     }
); 

действительно устарел, поскольку jQuery 1.8 здесь состояние с веб-сайта jQuery:

Когда используется имя события «hover», подсистема событий преобразует его в «mouseenter mouseleave» в строке события. Это раздражает по нескольким причинам:

Семантика: наведение - это не то же самое, что ввод и выход мыши из элемента, это подразумевает некоторое замедление или задержку перед выстрелом. Имя события: event.type, возвращаемый присоединенным обработчиком, не hover, а либо mouseenter, либо mouseleave. Никакое другое мероприятие этого не делает. Взаимодействие с именем «hover»: невозможно прикрепить событие с именем «hover» и запустить его с помощью .trigger («hover»). Документы уже называют это имя «настоятельно не рекомендуется для нового кода», я бы хотел официально отказаться от него для версии 1.8 и в конечном итоге удалить его.

Почему они удалили использование (": hover"), неясно, но да ладно, вы все еще можете использовать его, как указано выше, и вот небольшой прием, чтобы по-прежнему его использовать.

(function ($) {
   /** 
    * :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover") 
    * but using it in this way it works as :hover is css selector! 
    *
    **/
    $.fn.isMouseOver = function() {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);

О, и я не рекомендую версию с тайм-аутом, так как это создает большую сложность, используйте функции тайм-аута для такого рода вещей, если нет другого пути и поверьте мне, в В 95% процентов всех случаев есть другой способ!

Надеюсь, что смогу помочь парочке людей.

Гретц Энди

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

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

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

$("[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, это позволяет использовать очень удобные всплывающие подсказки при наведении курсора мыши. Кстати, мне нужна была задержка при наведении курсора мыши из-за крошечных промежутков между флажками и текстом, которые заставляли мигать подсказку при перемещении мыши. Но это работает как шарм. Я также сделал нечто подобное для событий фокусировки / размытия.

Я часто вижу, что для этого используются тайм-ауты, но в контексте события разве вы не можете посмотреть координаты, например ?:

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

В зависимости от контекста вам может потребоваться убедиться (this == e.target) перед вызовом areXYInside (e).

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

РЕДАКТИРОВАТЬ: это хорошая идея, но работает недостаточно стабильно. Возможно, с небольшими изменениями.

Вы можете проверить с 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"));
        }
    });

Это был бы самый простой способ сделать это!

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

Вот метод, который не полагается на jquery и использует собственный DOM matches API. Он использует префиксы поставщиков для поддержки браузеров, начиная с IE9. Подробнее см. Matchselector на caniuse.com.

Сначала создайте функцию matchSelector, например:

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

Затем, чтобы обнаружить наведение:

var mouseIsOver = matchesSelector(element, ':hover');

Я ответил на это в другом вопросе со всеми деталями, которые могут вам понадобиться:

Обнаружение IF, наведенного на элемент с помощью jQuery (имеет 99 голосов на момент написания)

В принципе, вы можете сделать что-то вроде:

var ishovered = oi.is(":hover");

Это работает, только если oi является объектом jQuery, содержащим единственный элемент. Если совпадают несколько элементов, вам нужно применить к каждому элементу, например:

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

Это было проверено запуском jQuery 1.7.

Вот функция, которая поможет вам проверить, находится ли мышь внутри элемента или нет. Единственное, что вам нужно сделать, это вызвать функцию, в которой у вас может быть живой объект EventObject, связанный с мышью. что-то вроде этого:

$("body").mousemove(function(event){
     element_mouse_is_inside($("#mycontainer", event, true, {});
});

Вы можете увидеть исходный код здесь, в github, или внизу сообщения:

https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js

function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
    if(!with_margin)
    {
        with_margin = false;
    }
    if(typeof offset_object !== 'object')
    {
        offset_object = {};
    }
    var elm_offset = elementToBeChecked.offset();
    var element_width = elementToBeChecked.width();
    element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
    element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
    var element_height = elementToBeChecked.height();
    element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
    element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
    if( with_margin)
    {
        element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
    }

    elm_offset.rightBorder = elm_offset.left+element_width;
    elm_offset.bottomBorder = elm_offset.top+element_height;

    if(offset_object.hasOwnProperty("top"))
    {
        elm_offset.top += parseInt(offset_object.top);
    }
    if(offset_object.hasOwnProperty("left"))
    {
        elm_offset.left += parseInt(offset_object.left);
    }
    if(offset_object.hasOwnProperty("bottom"))
    {
        elm_offset.bottomBorder += parseInt(offset_object.bottom);
    }
    if(offset_object.hasOwnProperty("right"))
    {
        elm_offset.rightBorder += parseInt(offset_object.right);
    }
    var mouseX = mouseEvent.pageX;
    var mouseY = mouseEvent.pageY;

    if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
        && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
    {
        return true;
    }
    else
    {
        return false;
    }
}

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

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

Я объединил идеи из этой темы и придумал вот что, что полезно для отображения / скрытия подменю:

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

Кажется, у меня работает. Надеюсь, это кому-то поможет.

РЕДАКТИРОВАТЬ: теперь понимаем, что этот подход не работает правильно в IE.

Мне не удалось использовать ни одно из приведенных выше предложений.
Почему я предпочитаю свое решение?
Этот метод проверяет, находится ли указатель мыши над элементом в любое время, выбранное вами.
Mouseenter и : hover - это круто, но mouseenter срабатывает, только если вы перемещаете мышь, а не когда элемент перемещается под курсором мыши.
: hover - это довольно мило но ... IE

Итак, я делаю это:

Нет 1. сохранять положение мыши по x, y каждый раз, когда она перемещается, когда вам нужно,
Нет 2. проверьте, находится ли указатель мыши над любым из элементов, которые соответствуют запрос делать что-то ... например, запускать событие mouseenter

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

Просто примечание о популярном и полезном ответе Артура Голдсмита выше: если вы перемещаете указатель мыши с одного элемента на другой в IE (по крайней мере, до IE 9), у вас могут возникнуть проблемы с правильной работой, если новый элемент имеет прозрачный фон (который будет по умолчанию). Мое обходное решение заключалось в том, чтобы придать новому элементу прозрачное фоновое изображение.

$(document).hover(function(e) {
    alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});

FIDDLE

Вы можете использовать is(':visible'); в jquery. А для $ ('. Item: hover') он также работает в JQuery.

это код htm snnipet:

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

и это код JS:

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

это то, о чем я говорил :)