保持表行在边框鼠标悬停时突出显示

Question

我使用下面的jQuery脚本在鼠标悬停时突出显示一个表行。

input.find("tr").live('mouseover mouseout', function (event) {
    if (event.type == 'mouseover') {
        $(this).children("td").addClass("ui-state-hover-light");
    } else {
        $(this).children("td").removeClass("ui-state-hover-light");
    }
});    

我的问题是，我在表格上有一个1px的边框，当鼠标点击这个边框时，该行的高亮显示就会丢失，直到鼠标到达下一个td。结果是，当鼠标在行中的各个单元格上移动时会出现闪烁。

有没有办法让鼠标点击边框时，高亮显示不会丢失？

Answer 1

看起来你的状态定义是关闭的。您的代码定义了一个基于其焦点的任一或多个状态，但还有第三种状态，其中没有单元格具有焦点。

我有一个只在鼠标悬停时执行的函数。让它找到突出显示的单元格，类似于您所做的，只是通过类，然后更改该单元格类，然后突出显示新的单元格。这样，只有当新的内容被突出显示时，它才会发生变化。

祝你好运和HTH。--乔

更新:示例很快就会出现。

Answer 2

遵循Mindfulgeek的建议，下面的解决方案解决了这个问题。

input.find("tbody tr").live('mouseenter', function (event) {
        // Remove highlighting from any other row
        $(this).siblings("tr.ui-state-hover-light").removeClass("ui-state-hover-light");

        // Highlight the row with focus
        $(this).addClass("ui-state-hover-light")                      
});     

input.find("tbody").bind('mouseleave', function() {
    // Remove highlighting from the last highlighted row
    var highlightedRow = $(this).find("tr.ui-state-hover-light");
    if(highlightedRow){
        highlightedRow.removeClass("ui-state-hover-light");
    }
});  

Answer 3

尝试使用mouseenter和mouseleave，而不是mouseover和mouseout