Question

我有一个span .test，当鼠标悬停在它上面时，它会滑动一个div .frame。只要鼠标离开.frame，。frame slideToggle就会再次出现。它工作得很好但是在.frame中我有一些其他div .qwerty，所以当鼠标结束时.qwerty，。frame slideToggle而不是保持显示，但我不明白为什么因为div .qwerty在.frame内。 / p>

我的代码是：

$(document).on('mouseover', '.test', function() {
    var el = $(this);
    var elWidth = el.width();
    $('body').append('<div class="frame"></div>');
    var frame = $('.frame:last');
    var posTop = el.offset().top;
    var posLeft = el.offset().left;
    el.hide();
    frame.hide().css({
        'left': posLeft,
        'top': posTop,
        'width':elWidth
    });
    frame.html('<div class="qwerty">qwerty</div><div class="qwerty">qwerty</div><div class="qwerty">qwerty</div>').slideToggle(150);
}).on('mouseout', '.frame', function() {
        var frame = $('.frame:last');
    frame.slideToggle(150, function() {
        frame.remove();
        $('.test').show();
    });
});

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

例如，如果我按

填写.frame

qwerty<br>qwerty<br>qwerty

它完美无缺

Answer 1

这是解释mouseover的方式，从技术上讲，一旦你的鼠标在另一个元素上，它就不再是原始元素了。请改用hover ..

 $('.test').hover(function() {

很遗憾，您必须修改javascript才能使其与.hover

一起正常使用

另一种方法是检查您当前所在的元素是否是.frame的孩子

编辑：虽然我的回答是正确的，但是您在将元素附加到body并隐藏.test元素时遇到了问题，因此该元素为no更长时间可专注于

这就是我要做的http://jsfiddle.net/dgJme/1/ - 基本上将.frame附加到.test元素，这样你就一直在.test元素内部，而不是在.frame

内有多少孩子

jQuery，鼠标悬停问题

1 个答案: