1

当鼠标悬停在 div .frame 上时，我想在该 div .frame 内切换 div .content 而当鼠标不在 .frame 上时，我希望 .content 再次切换并删除。

它正在工作，但我有几个问题，首先当鼠标不在 .frame 时，.content 没有切换，但它只是删除而没有任何影响。

然后当鼠标悬停在 .content （在 .frame 内）时，.content 正在删除......

我的代码是：

$(document).on('mouseover', '.frame', function() {
    var el = $(this);
    el.find('.inside').append('<div class="content"></div>');
    var content = $('.content:last');
    content.hide();
    content.html('aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>');
    $('.content').toggle(300);
}).on('mouseout', function() {
    var content = $('.content:last');
    $('.content').stop().toggle(300).remove();
});

这里有一个 jsFiddle：http: //jsfiddle.net/HAxPB/

4

1 回答 1

2

您必须使用回调函数等到效果完成。并使用mouseenter,mouseleave代替。代码还有一个小问题：.on('mouseout', function() {,应该是.on('mouseleave',",frame", function() {,

$(document).on('mouseenter', '.frame', function() {
    if ( $('.content').length > 0){
        return;
    }
    var el = $(this);
    el.find('.inside').append('<div class="content"></div>');
    var content = $('.content:last');
    content.hide();
    content.html('aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>');
    $('.content').toggle(300);
}).on('mouseleave','.frame', function() {
    var content = $('.content:last');
    $('.content').stop().toggle(300,function(){
        $(this).remove();
    })
});

演示

于 2013-09-05T12:16:38.950 回答