jQuery: как проверить, находится ли мышь над элементом

У меня есть отложенная функция, которая связывает событие mouseenter:

$(window).load(function(e) {
  var $container = $('.container');
  $container.mouseenter(function(e) {
    //do something
  });
  ...
});

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

// check if the mouse is inside $container
if(mouse is inside $container)
  $container.mouseenter();

Как проверить, находится ли мышь над элементом в событии загрузки?

Я попробовал $container.is(':hover') но он не работает.

Ответ 1

Я пошел с решением наложения css в Detect mouse hover при загрузке страницы с помощью jQuery, потому что это не требует события mousemove.

Ответ 2

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

Пример.

Наведите указатель мыши на div при первом загрузке. Затем обновите страницу (нажмите F5, чтобы вам не нужно было перемещать мышь). Когда страница будет загружена в следующий раз, она должна предупредить "Hover!". даже если вы не переместили мышь.

Или еще проще. Просто проверьте e.target.id в MouseMove событие (которое, очевидно, срабатывает один раз при загрузке страницы, даже не перемещая мышь) против id элемента, например, так:

$(document).mousemove(function(e){
    if( e.target.id === 'hoverTest'){
        alert("Hovered!");
    }
});

Пример (выполните те же действия, что и выше).

Ответ 3

Я не тестирую его, но думаю, что вы хотите, как это...

function checkMouseCollision(obj) {
    var offset = obj.offset();
    objX= offset.left;
    objY=offset.top;
    objW=obj.width();
    objH=obj.height();

    var mouseX = 0;
    var mouseY = 0;
    $().mousemove( function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    });

    if((mouseX>objX&&mouseX<objX+objW)&&(mouseY>objY&&mouseY<objY+objH)){
        alert("hovered")     
    };
};
checkCollision($(".box"))

Ответ 4

С jQuery 1. 7+ вы захотите использовать .on(): http://api.jquery.com/on/

$(document).ready(function(){
    $('body').on("mouseover", "your_element_selector_here", function() {
        // do stuff here
    });
});

.live устарел. Вы также можете поместить любые другие события в.on, в зависимости от того, что вам нужно. : зависание не работает, потому что оно работает только с определенными элементами и основано на CSS.

Используя это в сочетании с методом обнаружения смещения, прежде чем загрузка страницы закончится, вы получите то место, где вы хотите быть.

Ответ 5

Событие Mouseover делает именно то, что вы хотите.

Если .conteiner не существует во времени, вы присоединяете событие mouseover (добавляется динамически в будущем), вы должны использовать метод .live для присоединения события.

$(".conteiner").live("mouseover", function() {
   alert("hovered!");
})

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

Для jQuery 1. 7+ вы должны использовать метод .on вместо этого, поскольку метод.live устарел. Пример здесь!

Ответ 6

$('.container').mouseover(function(e) {
    //do something
});