0

我有一个跨度.test，当鼠标在它上面时，它会滑动切换一个div .frame。鼠标离开 .frame 后，再次 .frame 滑动切换。它工作得很好，但在 .frame 里面我还有一些其他的 div .qwerty，所​​以当鼠标在 .qwerty 上时，.frame 滑动切换而不是保持显示，但我不明白为什么，因为 div .qwerty 在 .frame 里面。

我的代码是：

$(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

它完美无缺

4

1 回答 1

0

It's the way mouseover is interpreted, technically, once your mouse is over another element it is no longer over that original element. use hover instead..

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

Unfortunately you'll have to amend your javascript for it to work properly with .hover

An alternative would be to check if the element you're currently on is a child of .frame

Edit: Although my answer is true, you've got an issue with appending the element to the body and hiding the .test element, so the element is no longer available to be focused on

This is what i would do http://jsfiddle.net/dgJme/1/ - basically append .frame to the .test element, that way you're hovered inside the .test element at all times, not matter how many children you have inside .frame

于 2013-08-14T12:00:54.530 回答