Можно ли использовать jQuery .on и hover?

У меня есть, <ul>который заполняется JavaScript после начальной загрузки страницы. В настоящее время я использую .bindс mouseoverи mouseout.

Проект только что обновился до jQuery 1.7, поэтому у меня есть возможность использовать .on, но я не могу заставить его работать hover. Можно ли использовать .onс hover?

РЕДАКТИРОВАТЬ : элементы, с которыми я связываюсь, загружаются с JavaScript после загрузки документа. Вот почему я использую onи не только hover.

( Посмотрите на последнее изменение в этом ответе, если вам нужно использовать .on()элементы, заполненные JavaScript )

Используйте это для элементов, которые не заполнены с использованием JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()имеет свой собственный обработчик: http://api.jquery.com/hover/

Если вы хотите сделать несколько вещей, объедините их в .on()обработчике так:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

В соответствии с ответами, приведенными ниже, вы можете использовать hoverс .on(), но:

Несмотря на то, что новый код настоятельно не рекомендуется, вы можете увидеть псевдо-событие-имя "hover", используемое как сокращение для строки "mouseenter mouseleave". Он присоединяет один обработчик событий к этим двум событиям, и обработчик должен изучить event.type, чтобы определить, является ли событие mouseenter или mouseleave. Не путайте псевдо-имя-события hover с методом .hover (), который принимает одну или две функции.

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

РЕДАКТИРОВАТЬ

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

Хотя я предпочитаю использовать mouseenterи mouseleave(помогает мне понять, что происходит в коде) с .on()ним все равно, что написать следующее сhover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Так как в первоначальном вопросе спрашивалось, как они могут правильно работать on()с ними hover(), я подумал, что исправлю использование, on()и не счел необходимым добавлять hover()код в то время.

РЕДАКТИРОВАТЬ 11 ДЕКАБРЯ 2012 ГОДА

Некоторые новые ответы, представленные ниже, подробно описывают, как .on()должно работать, если рассматриваемый divвопрос заполнен с использованием JavaScript. Например, допустим, вы заполняете событие с divиспользованием jQuery .load(), например так:

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

Код выше .on()не будет стоять. Вместо этого вы должны немного изменить свой код, например так:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

Этот код будет работать для элемента, заполненного JavaScript после .load()события. Просто измените свой аргумент на соответствующий селектор.

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

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

Это свяжет функции с селектором, так что объекты с этим селектором, созданным после того, как документ будет готов, по-прежнему смогут вызывать его.

Я не уверен, как выглядит остальная часть вашего Javascript, поэтому я не смогу определить, есть ли какие-либо помехи. Но .hover()прекрасно работает как событие с .on().

$("#foo").on("hover", function() {
  // disco
});

Если вы хотите иметь возможность использовать его события, используйте возвращенный объект из события:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

Функция наведения jQuery дает возможность наведения и наведения мыши.

$ (Селектор) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

Источник: http://www.w3schools.com/jquery/event_hover.asp

Просто зашел в Интернет и почувствовал, что могу внести свой вклад. Я заметил, что приведенный выше код, опубликованный @calethebrewer, может привести к нескольким вызовам через селектор и неожиданному поведению, например:

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

Эта скрипка http://jsfiddle.net/TWskH/12/ иллюстрирует мою точку зрения. При анимации элементов, таких как плагины, я обнаружил, что эти множественные триггеры приводят к непреднамеренному поведению, которое может привести к тому, что анимация или код будут вызываться больше, чем необходимо.

Мое предложение состоит в том, чтобы просто заменить mouseenter / mouseleave: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

Несмотря на то, что это препятствовало вызову нескольких экземпляров моей анимации, я в конечном итоге пошел с помощью mouseover / mouseleave, так как мне нужно было определить, когда над дочерними элементами родительского элемента находились мыши.

Вы можете использовать .on()с hoverтем, что сказано в разделе «Дополнительные примечания»:

Несмотря на то, что новый код настоятельно не рекомендуется, вы можете увидеть псевдо-событие-имя "hover", используемое как сокращение для строки "mouseenter mouseleave". Он присоединяет один обработчик событий к этим двум событиям, и обработчик должен изучить event.type, чтобы определить, является ли событие mouseenter или mouseleave. Не путайте псевдо-имя-события hover с методом .hover (), который принимает одну или две функции.

Это было бы сделать следующее:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

РЕДАКТИРОВАТЬ (примечание для пользователей jQuery 1.8+):

Устаревшее в jQuery 1.8, удалено в 1.9: имя «hover», используемое как сокращение для строки «mouseenter mouseleave». Он присоединяет один обработчик событий к этим двум событиям, и обработчик должен изучить event.type, чтобы определить, является ли событие mouseenter или mouseleave. Не путайте псевдо-имя-события hover с методом .hover (), который принимает одну или две функции.

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Вы можете указать один или несколько типов событий, разделенных пробелом.

Так hover что равняется mouseenter mouseleave.

Это мое предположение:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Если вам нужно, чтобы это было условием в другом событии, я решил это следующим образом:

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

Тогда в другом случае вы можете легко использовать его:

 if ($(this).data('hover')){
      //...
 }

(Я вижу, что некоторые используют is(':hover')для решения этой проблемы. Но это (пока) не действительный селектор jQuery и не работает во всех совместимых браузерах)

Плагин jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html идет намного дальше, чем наивные подходы, перечисленные здесь. Хотя они, безусловно, работают, они не обязательно ведут себя так, как ожидают пользователи.

Самая веская причина использовать hoverIntent - это тайм-аут функция . Это позволяет вам делать такие вещи, как предотвращение закрытия меню, поскольку пользователь немного перетаскивает свою мышь вправо или влево, прежде чем щелкнуть нужный элемент. Он также предоставляет возможности не активировать парящие события в заграждении и ожидает сфокусированного зависания.

Пример использования:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

Дальнейшее объяснение этого можно найти на https://stackoverflow.com/a/1089381/37055.