3

我在 jQuery 中使用“鼠标悬停”功能时遇到问题。

当我的元素上的鼠标太快时，我失去了“mouseleave”功能，并且我的元素不会删除自己......

我的 JSFiddle：http: //jsfiddle.net/tonymx227/4YRuf/5/

我的代码：

$('figure').children('img').on('mouseover', function(e){
    $(this).parent().append('<div id="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');
    $(this).parent().children('#figure-over').stop().slideDown();
    $(this).parent().children('#figure-over').on('mouseleave', function(){
        $(this).stop().slideUp( function(){
            $(this).remove();
        });
    }).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});
4

2 回答 2

1

尝试这样的事情（我改用 using mouseout）：

http://jsfiddle.net/4YRuf/14/

$('figure').children('img').on('mouseover', function (e) {
    if (!$(this).parent().find('#figure-over').length){
        $(this).parent().append('<div id="figure-over"><a href="' + $(this).parent().data('url') + '" target="_blank">Voir</a></div>');
        $(this).parent().children('#figure-over').slideDown();
    }
});
$(document).on('mouseout', '#figure-over', function () {
    $(this).stop().slideUp(function () {
        $(this).remove();
    });
}).on('click', '#figure-over', function () {
    window.open($(this).children('a').attr('href'));
});

基本上假设您的 mouseenter 事件将重复发生并在再次添加子对象之前进行检查。您还需要连接到 enter 事件之外的 leave 事件以避免意外链接多个事件 - 尽管包含检查也可以避免这种情况。例如

$('figure').children('img').on('mouseover', function (e) {
    if (!$(this).parent().find('#figure-over').length){
        $(this).parent().append('<div id="figure-over"><a href="' + $(this).parent().data('url') + '" target="_blank">Voir</a></div>');
        $(this).parent().children('#figure-over').stop().slideDown();
        $(this).parent().children('#figure-over').on('mouseoutfunction () {
            $(this).stop().slideUp(function () {
                $(this).remove();
            });
        }).on('click', function () {
            window.open($(this).children('a').attr('href'));
        });
    }
});
于 2013-10-25T08:23:27.110 回答
1

尝试这样的事情：http: //jsfiddle.net/4YRuf/13/

有了这个：您可以快速移动鼠标，结果会更好。并使用 class 而不是 id ...

$('figure').children('img').on('mouseover', function(e){
    $('.figure-over').remove();
    $(this).parent().append('<div class="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');
    $(this).parent().children('.figure-over').stop().slideDown();
    $(this).on('mouseleave', removeIt)
    $(this).parent().children('.figure-over').on('mouseleave', removeIt).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});


function removeIt()
{    
    if( ! $('.figure-over').is(':hover') )
    {

        $('.figure-over').stop().slideUp( function(){

                $(this).remove();
            });
    }
}

更新 ：

效果更好：http: //jsfiddle.net/4YRuf/17/

$('figure').children('img').on('mouseover', function(e){

    if ( $('.figure-over').length == 0)
    {
         $(this).parent().append('<div class="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');   
    }

    $(this).parent().children('.figure-over').stop().slideDown();
    $(this).on('mouseleave', removeIt)
    $(this).parent().children('.figure-over').on('mouseleave', removeIt).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});


function removeIt()
{    
    if( ! $('.figure-over').is(':hover') )
    {

        $('.figure-over').stop().slideUp( function(){

                $(this).remove();
            });
    }
}
于 2013-10-25T08:25:36.610 回答