1

我正在使用如下所示的事件冒泡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");
        });
    }
});

我是新手。所以可能有一个愚蠢的错误。请指出。提前谢谢各位。

4

2 回答 2

3

您只需要将事件应用于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页面加载时可用的元素的元素。

于 2012-08-10T08:25:56.467 回答
1

尝试这个：

$(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-10T08:30:55.877 回答