Держите строку таблицы выделенной при наведении курсора мыши

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

Моя проблема в том, что у меня есть граница размером 1 пиксель на столе, и когда мышь достигает этой границы, выделение строки теряется, пока мышь не перейдет к следующему значению 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

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

Answer 4

Попробуйте mouseenter и mouseleave вместо mouseover и mouseout