jquery中的事件冒泡問題

我使用類似下面的事件冒泡來調整h3標記文本在鼠標懸停時的大小，並在鼠標懸停在文本上時恢復爲原始大小。但它不起作用。jquery中的事件冒泡問題

$('body').hover(function (event) { 
    if ($(event.target).is('h3')) { 
     $(event.target).hover(function() { 
      $(this).css("font-size", "40px"); 
     }, 
     function() { 
      $(this).css("font-size", "40px"); 
     }); 
    } 
});

我是新手。所以可能會有一個愚蠢的錯誤。請指出。在此先感謝你們。

來源

2012-08-10 user1544975

您只需將事件應用於h3元素本身。試試這個：

$("h3").hover(function() { 
    $(this).css("font-size", "40px"); 
}, 
function() { 
    $(this).css("font-size", "20px"); 
});

而且，這將是更好地使用CSS類修改字體的大小，因爲它是中分類：

$("h3").hover(function() { 
    $(this).addClass("big-text"); 
}, 
function() { 
    $(this).removeClass("big-text"); 
}); 

// CSS 
h3 { font-size: 12px; } 
.big-text { font-size: 40px; }

UPDATE

由於h3元素是動態加載的，因此您需要將on與代理一起使用。試試這個：

$("body").on("hover", "h3", function(e) { 
    if (e.type == "mouseenter") { 
     $(this).css("font-size", "40px"); 
    } 
    else { // mouseleave 
     $(this).css("font-size", "20px"); 
    } 
});

我已經使用body爲主要選擇在這裏，但你應該用最接近的元素到h3元素是網頁載入。

來源

2012-08-10 08:25:56

right.but我的要求是different.i網頁上有一些按鈕，使用了Ajax調用加載其他文件作爲每click.so這些文件返回的文本也包含h3標記的text.so我需要應用懸停在這些以及因此，我正在使用上述過程。 – user1544975 2012-08-10 08:27:57

+1使用類。 – undefined 2012-08-10 08:28:01

沒問題看到我的更新。 – 2012-08-10 08:30:24

試試這個：

$(document).on('mouseenter', 'h3', function(event) { 
     $(this).css("font-size", "40px"); 
}) 

$(document).on('mouseleave', 'h3', function(event) { 
     $(this).css("font-size", "20px"); 
})

或：

$(document).on({ 
    mouseenter: function() { 
     $(this).addClass('aClass') 
    }, 
    mouseleave: function() { 
     $(this).removeClass('aClass') 
}, 'h3')

來源

2012-08-10 08:30:55 undefined

jquery中的事件冒泡問題

回答

相關問題