깜놀하는 해므찌로

CSS Class 클래스를 활용하여 배경 및 글씨 색깔 변경하기 예시 본문

IT

CSS Class 클래스를 활용하여 배경 및 글씨 색깔 변경하기 예시

agnusdei1207 2022. 8. 9. 10:25
반응형
SMALL
<style>
	.selected_tr{     
		background:#05a1eb !important;   
	}    
	.selected_tr td{     
		color:white !important;     
	} 
	.tbl_col_type01 tr:hover td{      
		background:#05a1eb !important;       
		color:white !important;        
	}    
</style>

1. !important 사용 시 해당 속성 : 값 다음에 바로 선언한다.

2. tr:hover tr 태그에 호버를 할 경우 td까지 변경하도록 한다.

function fncModalChoose(seq){  
	/* 배경색 변경 */        
	$("[id^='tr_']").removeClass("selected_tr");
	$("#tr_"+seq).addClass("selected_tr");
}

3. 'tr_' 글자로 시작하는 id 값의 'selected_tr' 클래스를 전부 제거

4. 제거한 후 클릭한 대상의 SEQ 를 받아 해당 id 의 tr 태그에만 CSS 가 적용된 class 를 추가하도록 한다.

반응형
LIST