jquery - JQuery - トグル ホバーを on と組み合わせる

Question

トグルホバーをオンイベントと組み合わせるにはどうすればよいですか? コード：

img.on('hover', function(){
            name = $(this).attr('title');
            function(){
              $(this).parent().append('<figcaption>' + name);
            },
            function(){
              $(this).find('figcaption').remove();
            }
          });

Answer 1

と に分割する必要がmouseenterありmouseleaveます。

img.on('mouseenter', function() {
    name = $(this).attr('title');
    $(this).parent().append('<figcaption>' + name);
}).on('mouseleave', function() {
    $(this).find('figcaption').remove();
});

これはhover、単一の関数にラップするものです。

Answer 2

要素を閉じるのではなく、figcaptionランダムな文字列に開始要素とテキストを追加するだけで、代わりに jQuery オブジェクトとして作成します。また、figcaption 要素がthis親に追加されているため、子ではなく兄弟になるため、find内部でthisは見つからないため、兄弟を探すか、親要素を検索する必要があります (図である必要があります)。エレメント）：

img.on({
    mouseenter: function() {
        var name = $(this).attr('title'),
            figcaption = $('<figcaption />', {text: name});
        $(this).parent().append(figcaption);
    },
    mouseleave: function() {
        $(this).parent().find('figcaption').remove();
    }
});

Answer 3

.on()コールバック関数を 1 つだけ持つことができます。したがって、 と の両方を指定.on('mouseenter', ...)し.on('mouseleave', ...)て、.on() で .hover() の動作を模倣する必要があります。