如何在悬停.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>
答案 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
}
});