JQuery - 结合切换悬停与on

How can I combine toggle hover with on event? The code:

如何将切换悬停与on事件结合使用?代码:

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

3 个解决方案

#1

You have to split it into mouseenter and mouseleave:

你必须将它分成mouseenter和mouseleave:

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

which is what hover wraps into a single function.

这是悬停包含在单个函数中的内容。

#2

You're not closing the figcaption element, you're just appending some random string with a starting element and some text, create it as a jQuery object instead. Also, the figcaption element is appended to this parent, which would make it a sibling and not a child, so find inside this will not find it, you'd either have to look for a sibling or search in the parent element (which should be a figure element):

你没有关闭figcaption元素,你只是附加一些带有起始元素和一些文本的随机字符串,而是将其创建为jQuery对象。此外,figcaption元素被附加到这个父级,这将使它成为一个兄弟而不是一个孩子,所以在里面找不到它,你要么必须寻找一个兄弟或在父元素中搜索(这应该是一个数字元素):

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

#3

-1

.on() can only have one callback function. So you will have to specify both .on('mouseenter', ...) and .on('mouseleave', ...) to mimic the .hover() behavior with .on().

.on()只能有一个回调函数。所以你必须同时指定.on('mouseenter',...)和.on('mouseleave',...)来模仿.on()的.hover()行为。

#1