Чи можливо використовувати jQuery .on та навести курсор?

У мене є <ul>те, що після початкового завантаження сторінки заповнюється javascript. Я в даний час використовую .bindз mouseoverі mouseout.

Щойно проект оновився до jQuery 1.7, тому я маю можливість використовувати .on, але я не можу змусити його працювати hover. Чи можна використовувати .onз hover?

EDIT : Елементи, до яких я прив'язую, завантажуються 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. Я запропонував відповідь, вимагає менше коду, і це правильний спосіб досягти чогось подібного.

EDIT

Минув час, коли відповіли на це запитання, і, схоже, воно набуло певної тяги. Наведений вище код все ще стоїть, але я хотів щось додати до своєї оригінальної відповіді.

Хоча я віддаю перевагу використанню 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. Наприклад, скажімо, що ви заповнюєте подію divjQuery .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
});

Хоча це заважало викликати кілька випадків моєї анімації, я врешті-решт пішов з курсором миші / миші, як мені потрібно було визначити, коли діти батька зависають.

Ви можете використовувати .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"); }

});

EDIT (примітка для користувачів 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