Question

我有一个跨越行的表。跨越行中的某些tds具有通过jQuery定向的类，以便在鼠标进入时弹出窗口淡入淡出。当鼠标离开td时，弹出窗口淡出。

这是表格：

<table>
    <tbody>
        <tr>
            <td rowspan="2">Some Items</td>
            <td class="cell-popup">A</td>
        </tr>
        <tr>
            <td class="cell-popup">B</td>
        </tr>
    </tbody>
</table>

这是jQuery：

var cell = $('.cell-popup'),
        popup = $('.popup');

cell.on({
    mouseenter: function(e){
        popup.css({
            left: e.pageX + 'px',
            top: e.pageY + 'px'
        }).fadeIn()
    },
    mouseleave: function(e){
        popup.fadeOut();
    }
});

问题是，当鼠标离开当前单元格并进入新的.cell-popup时，如何使弹出窗口不隐藏/显示？我想将.cell-popups视为“一个”单元格。意思是，如果来自外部任何.cell-popup并且鼠标进入任何.cell-popup，弹出窗口应显示。如果我从一个.cell-popup移动到另一个.cell-popup而没有输入非.cell-popup元素，弹出窗口应该保持原样。

Answer 1

您可以使用API文档中说明的hover方法：http://api.jquery.com/hover/

$('.cell-popup').hover(
  function(){$('.popup').show();},
  function(){$('.popup').hide();}
);

Answer 2

超时后

fadeOut 弹出窗口。如果鼠标在超时前输入另一个.cell-popup，请清除超时 - 有效防止fadeOut。

var fadeOutTimer = null;
cell.on({
    mouseenter: function(e){
        if(fadeOutTimer) { // already displayed, so clear the timeout
            clearTimeout(fadeOutTimer);
            fadeOutTimer = null;
        }
        else {
            popup.css({
                left: e.pageX + 'px',
                top: e.pageY + 'px'
            }).fadeIn();
        }
    },
    mouseleave: function(e){
        fadeOutTimer = setTimeout(function() {
            popup.fadeOut();
            fadeOutTimer = null;
        }, 500); // 500ms
    }
});

当鼠标进入弹出窗口时丢弃超时：

popup.on({
    mouseenter: function(e){
        if(fadeOutTimer) { // already displayed, so clear the timeout
            clearTimeout(fadeOutTimer);
            fadeOutTimer = null;
        }
    }
});

来自同一类的多个元素的无缝mouseenter / mouseleave

2 个答案: