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 に答える