테이블 행 강조 표시

테이블 행 강조 표시에 jquery를 사용하고 있습니다. 여기 내 코드는 다음과 같습니다.테이블 행 강조 표시

$('table#results tr').mouseover(function() { 
    var color = $(this).css("background-color") 
$(this).css("background-color","yellow !important"); 
}).mouseout(function() { 
$(this).css("background-color", ""+color+" !important"); 
});

목표는 변수의 원래 행 색상을 유지하는 것입니다. 색상 변수는 mouseout 메소드에서 액세스 할 수 없습니다 (범위 규칙 때문에 믿을 수 있음). 내 질문에 mouseout 메서드에서 액세스 할 수 있도록 color var을 어떻게해야할까요?

출처

2012-01-23 objlv

외부 CSS 선택기에서 원래 색상을 선언하고 jQuery로 변경해야 이전 색상을 유지할 필요가 없습니다. 또한 HTML을 덜 악의적으로 만듭니다. –

그냥 잡은 행을 CSS를 사용하여 강조 표시 해야하는 경우, 전혀 javascipt 필요가 없습니다. – dfsq

클래스를 추가 한 다음 필요없는 경우 클래스를 제거하십시오.

$(function() { 
    $('table#results tr').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 
});

그리고 CSS에서

: 추가해서

table#results tr:hover td { 
    background-color: yellow; 
}

: 이것은 내 의견에 훨씬 더 나은 솔루션을 순수 CSS, 함께 할 수있는

.hover { background-color: yellow !important; }

출처

2012-01-23 14:21:18

가져가 셀렉터에게, 그것은 셀렉터 체인이 거기에서 멈춰야한다는 것을 의미하지 않습니다. 이 기능은 자바 스크립트 및 클래스를 사용하여이 모든 미친 작업을 수행하는 것보다 테이블 행을 강조 표시하는 좋은 방법입니다. 커서를 가져 가면 표 셀에 배경을 추가하기 만하면됩니다.

출처

2012-01-23 14:27:22

테이블 행 강조 표시

답변

관련 문제