2012-04-09 7 views
0

Я хотел бы иметь как зависание, так и удаление события наведения. Узлы, которые имеют это событие, добавляются динамически, поэтому я хочу использовать on(). При добавлении события зависания он отлично работает (список #second ниже). По какой-то причине, когда я добавляю событие off hover, даже событие добавления hover не будет работать (# первый список ниже).Удалить наведите указатель мыши на()

Просьба указать любые ключи. Живой пример расположен в http://jsfiddle.net/NV7hR/

Благодарности

$(document).ready(function() { 
    $("#first").on("hover", "a", function(event) { 
    $(this).parent().css("background-color", "yellow"); 
    }, function(event) { 
    $(this).parent().css("background-color", ""); 
    }); 
    $("#second").on("hover", "a", function(event) { 
    $(this).parent().css("background-color", "yellow"); 
    }); 
}); 

<body> 
<ul id="first"> 
    <li><a href="#"/>Link</a></li> 
    <li><a href="#"/>Link</a></li> 
    <li><a href="#"/>Link</a></li> 
</ul> 
<ul id="second"> 
    <li><a href="#"/>Link</a></li> 
    <li><a href="#"/>Link</a></li> 
    <li><a href="#"/>Link</a></li> 
</ul> 
</body> 
+3

'.hover' является сокращенной формой событий' mouseenter' и 'mouseleave'. Наведение как таковое не является событием. И .on («hover» .. не является допустимым синтаксисом. –

+0

http://api.jquery.com/hover/ это все ... RTFM! – Niko

+0

@Niko Вы не можете использовать зависание с .on(). user1032531 хочет использовать .on(), они должны разбить его на mouseenter и mouseleave. Альтернативно, вы можете использовать .hover() напрямую. –

ответ

4

Разделить парения в MouseEnter и MouseLeave, что и парение представляет собой сокращенное в любом случае.

$("#first").on("mouseenter", "a", function(event) { 
    $(this).parent().css("background-color", "yellow"); 
}).on("mouseleave", "a", function(event) { 
    $(this).parent().css("background-color", ""); 
}); 
3

.hover как таковой не является событием. hover является сокращением на mouseenter и mouseleave событий. Попробуйте использовать, как показано ниже,

DEMO

$("#first").on({ 
    mouseenter: function() { 
     $(this).parent().css("background-color", "yellow"); 
    }, 
    mouseleave: function() { 
     $(this).parent().css("background-color", ""); 
    } 
}, 'a'); 
+0

+1 от меня для демонстрации ^^ –

2

Несмотря на то, что все остальные претензии, вы действительно можете использовать 'hover' с .on().

Просто вы не можете передать 2 функции. Вам необходимо проверить тип события.

$("#first").on("hover", "a", function(e) { 
    $(this).css("background-color", e.type === 'mouseenter' ? "yellow" : ''); 
}); 

ДЕМО:http://jsfiddle.net/HxuuS/


FYI, причина прохождения 2 функции заставил это не работать вообще в том, что первый обработчик был интерпретирован как дополнительный data аргумент on, так что это был только второй обработчик (mouseleave), который был связан.

+0

Я не вижу смысла использовать сокращенное выражение 'hover', когда у вас есть чтобы проверить событие мыши в любом случае. – Sparky

+1

+1 от меня для отображения '.on ('hover')' с 'event.ty pe' –

+1

@ Sparky672: Есть ситуации, когда это имеет смысл. Например, если я использовал '.toggleClass()' вместо '.css()'. Даже учитывая приведенный выше пример, это еще меньше кода, чем назначение отдельных обработчиков. –

Смежные вопросы