jQuery hover не работает

Question

Я хочу, чтобы jQuery что-то делал после того, как я наводил элемент и делал что-то еще при помощи мыши.

Я написал это:

   jQuery('.item').hover(

        function() {
            var bg = jQuery(this).attr('data-background'); 
            jQuery(this).css("background-color", bg);
        }, 

        function() { /* this doesn't seem to work */
             alert(bg);  
        });

Скажите, почему этот код работает нормальнодо второй функции, так что она никогда ничего не предупреждает?Я считаю, что есть опечатка, но я не могу ее найти; /

Answer 1

Ну, bg не определено во второй функции.Это только локально для первого.Это будет работать:

jQuery('.item').hover(
    function() {
        var bg = jQuery(this).attr('data-background'); 
        jQuery(this).css("background-color", bg);
    }, 
    function() {
         var bg = jQuery(this).attr('data-background'); 
         alert(bg);  
});

DEMO

Чтобы отдать должное голосам, вы могли бы также определить bg в области, доступной для обеих функций:

(function() {
    var bg;
    jQuery('.item').hover(
        function() {
            bg = jQuery(this).attr('data-background'); 
            jQuery(this).css("background-color", bg);
        }, 
        function() {
            alert(bg);  
    });
 }());

Здесь непосредственная функция создает новую область (поэтому bg не загрязняет глобальную область).Но необходимость в этом зависит от того, что вы действительно хотите сделать.

DEMO

---

Начиная с jQuery 1.4.3, выможет получить доступ к data-background также с помощью .data():

var bg = jQuery(this).data('background');