[HTML] 테이블 행(row) 마우스 커서 오버시 색 변경

데이터를 보기 편하게 하는 방법 2

 

이전 포스트 에서 각 행 별로 스타일을 적용했었는데요

이번 포스팅에서는 마우스를 가져갔을 때 색을 변경하는 방법을 설명하겠습니다.

 

스타일은

 

<style>

table,tr,td{

  border:1px solid #000000;

  border-collapse:collapse;

}

tr.colored:nth-child(even){

  background-color:#aaaaaa;

  color:#000000;

}

tr.colored:nth-child(odd){

  background-color:#444444;

  color:#FFFFFF;

}

tr.colored:hover td{

  background-color:#f3e9e9 !important;

  color:#303f39 !important;

}

</style>

 

테이블은

 

<table>

<tr class="colored">

<td>테스트1-1</td>

<td>테스트1-2</td>

<td>테스트1-3</td>

<td>테스트1-4</td>

<td>테스트1-5</td>

</tr>

<tr class="colored">

<td>테스트2-1</td>

<td>테스트2-2</td>

<td>테스트2-3</td>

<td>테스트2-4</td>

<td>테스트2-5</td>

</tr>

<tr class="colored">

<td>테스트3-1</td>

<td>테스트3-2</td>

<td>테스트3-3</td>

<td>테스트3-4</td>

<td>테스트3-5</td>

</tr>

</table>

 

입니다.

 

hover 를 적용하고 td에 배경이랑 글자색을 변경한 것인데요

!important 라는 인자가 보일 텐데 이 인자는 우선순위를 지정해 주는 것입니다.

다른 스타일과 중복이 되어 처리가 될 때 어떤 것을 먼저 할 것인지를 지정해 주는 것이죠.

당연히 !important 가 들어간 부분을 우선적용하게 됩니다.