국경 마우스 오버시 테이블 행 강조 표시

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

당신의 상태 정의가 꺼져있는 것 같습니다보십시오. 코드가 포커스를 기준으로 정의하거나 포커스를 기반으로하지만 셀에 포커스가없는 세 번째 상태가 있습니다.

나는 mouseover에서만 실행되는 함수를 원했습니다. 당신이 한 것과 비슷한, 강조된 셀을 클래스별로 만 찾은 다음, 그 셀 클래스를 변경하고 새로운 셀을 강조 표시하십시오. 이 방법은 새 항목이 강조 표시 될 때만 변경됩니다.

행운과 HTH. - 조

업데이트 : 곧 제공 될 예 :

Answer 2

는 mouseenter 및 mouseleave 대신 mouseover 및 mouseout

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

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