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

您必须将其拆分为mouseenterand 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()只能有一个回调函数。因此，您必须同时指定两者.on('mouseenter', ...)并.on('mouseleave', ...)使用 .on() 来模仿 .hover() 行为。