Question

如何在悬停.thumb同级元素.description时停止触发mouseleave触发器，该元素位于属性：position absolute。

我有以下js代码

$('.thumb').on({
    mouseenter: function() {
        $(this).siblings('.description').delay(100).slideDown(200);
        start_preview($(this));
    },

    mouseleave: function(e) {
        $(this).siblings('.description').stop(true, true).slideUp(200);
        clearInterval( $(this).data('timer') ); //Stops preview
    }
});

对于以下HTML代码：

<td><a href="/video?id=1052">
    <img class="thumb" src="path" />
    <div class="description"></div>
</a></td>

Answer 1

$('.thumb').on({
    mouseenter: function() {
        $(this).siblings('.description').delay(100).slideDown(200);
        start_preview($(this));
    },

    mouseleave: function(e) {
        var sibs = $(this).siblings('.description');
        $.each(sibs, function(i, v) {
            if ($(this).css('position') == 'absolute') {
                return false;
            } else {
                $(this).stop(true, true).slideUp(200);
                clearInterval( $(this).data('timer') ); //Stops preview
            };
        });
    }
});

Answer 2

请尝试改为：

$('.thumb').closest('td').on({ 
    mouseenter: function() {
        $(this).find('.description').delay(100).slideDown(200);
        start_preview($(this).find('.thumb'));
    },

    mouseleave: function(e) {
        $(this).find('.description').stop(true, true).slideUp(200);
        clearInterval( $(this).find('.thumb').data('timer') ); //Stops preview
    }
});

覆盖子元素时停止mouseleave触发器

2 个答案: