保持表格边框突出显示鼠标移动

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

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

来源

2011-08-26 Nick Olsen

它看起来像你的状态定义为关闭。你的代码正在定义一个或者基于它的焦点，但是有第三个状态，没有细胞有焦点。

我想要一个只在mouseover上执行的函数。让它找到高亮的单元格，类似于你所做的，只能按类，然后改变这个单元格类，然后突出显示新单元格。这种方式只会在突出显示新内容时才会更改。

祝你好运和HTH。 - Joe

更新：即将推出的示例。

来源

2011-08-26 16:34:27 Mindfulgeek

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

尝试mouseenter和mouseleave代替mouseover和mouseout

来源

2011-08-26 16:16:28 check123

这并不解决问题。仍然失去对细胞之间的关注。 –

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

来源

2011-08-26 16:51:07

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

来源

2012-01-18 00:26:08

保持表格边框突出显示鼠标移动

回答

相关问题