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

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

保持表格行在边界鼠标悬停上突出显示

4 个答案: