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

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

$("#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/

можно использовать .on() С hover делая то, что говорится в разделе дополнительных заметок:

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

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

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

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

});

---

EDIT (примечание для пользователей jQuery 1.8+):

устарело в jQuery 1.8, удалено в 1.9: имя "hover" используется в качестве стенография для строки "mouseenter mouseleave". Он прикрепляет один обработчик событий для этих двух событий, и обработчик должен проверить событие.тип для определения независимо от того, является ли событие mouseenter или mouseleave. Не путайте псевдоним события "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');

функция наведения jQuery дает функцию наведения и mouseout.

$(селектор).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, поскольку мне нужно было определить, когда дети родителя зависали.

для элементов, которые добавляются динамически, см. http://api.jquery.com/on/. я цитирую основные части: обработчики событий привязаны только к текущим выбранным элементам; они должны существовать на странице в момент вызова кода .на.)( если новый HTML вводится на страницу, то предпочтительно использовать делегированные события для присоединения обработчика событий, как описано далее.

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

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

$("#dataTable tbody tr").on("mouseenter", function(event){
  alert($(this).text());
});

подход делегированных событий присоединяет обработчик событий только к одному элементу, tbody, и событие должно только всплывать на один уровень (от tr до tbody):

$("#dataTable tbody").on("mouseenter", "tr", function(event){
  alert($(this).text());
});

Примечание: делегированные события не работают для SVG.

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

Так hover равна mouseenter mouseleave.

Это мой sugession:

$("#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