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

【问题标题】：Keep Table Row Highlighted on Border Mouseover在边框鼠标悬停时保持表格行突出显示
【发布时间】：2011-11-04 16:16:42
【问题描述】：

我正在使用以下 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。结果是鼠标在行中的各个单元格上移动时闪烁。

有没有办法让它在鼠标碰到边框时不会丢失突出显示？

【问题讨论】：

标签： jquery html html-table highlighting

【解决方案1】：

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

【讨论】：

这并不能解决问题。仍然失去了对单元格之间的关注。

【解决方案2】：

您的状态定义似乎已关闭。您的代码正在定义一个或基于其焦点，但存在没有单元格具有焦点的第三种状态。

我有一个只在鼠标悬停时执行的函数。让它找到突出显示的单元格，类似于您所做的，仅按类别，然后更改该单元格类别，然后突出显示新单元格。这样，只有在突出显示新内容时才会更改。

祝你好运，HTH。 -- 乔

更新：示例即将推出。

【讨论】：

好的cmets。感谢您改变我对这个问题的看法。解决方案在我发布的答案中找到。

【解决方案3】：

按照 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");
    }
});

【讨论】：

【解决方案4】：

$("tbody tr").mouseenter(function (event) { $("td", $(this)).addClass("ui-state-hover-light"); });
$("tbody tr").mouseleave(function (event) { $("td", $(this)).removeClass("ui-state-hover-light"); });

【讨论】：