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

时间:2013-07-09 15:57:53

标签: jquery hover mouseevent

如何在悬停.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>   

2 个答案:

答案 0 :(得分: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
            };
        });
    }
});

答案 1 :(得分:1)

请尝试改为:

$('.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
    }
});