Question

我正在使用如下所示的事件冒泡来在鼠标悬停时调整h3标记文本的大小，并在鼠标悬停在文本上时恢复原始大小。但它不起作用。

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

我是新手。所以可能有一个愚蠢的错误。请指出。先谢谢你们。

Answer 1

您只需将事件应用于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; }

<强>更新

由于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元素最接近的元素。

Answer 2

试试这个：

$(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')

jquery中的事件冒泡问题

2 个答案: