[HTML/CSS] 테이블에 마우스 오버 시 행(row) 배경색 변경

 

테이블의 행(row)에 마우스를 올릴 경우,

해당 행의 배경색을 변경하는 방법입니다.

 

:hover

css의 pseudo-class(의사 클래스)인 :hover는

보통 마우스 포인터가 요소 위에 올라가면 선택됩니다.

이 :hover를 사용하여, 마우스가 테이블의 특정 row에 올라갔을 때,

행 전체의 배경색을 변경할 수 있습니다.

 

 

  마우스오버 시, 행(row) 배경색 변경  

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>30</td>
  </tr>
  <tr>
    <td>David</td>
    <td>33</td>
  </tr>
</table>
  

table, td, th {
  border: 1px solid black;
  border-collapse: collapse;
}

table tr:hover {
  background-color: GreenYellow;
}

table tr:hover { 

  background-color: GreenYellow;

}

테이블의 <tr> 영역에 마우스 커서를 올리면, 

해당 <tr> 영역의 배경색이 연두색으로 변경됩니다.

 

그런데, 테이블의 헤더 영역까지도 연두색으로 변경되는 것이 좀 어색한 것 같습니다.

다음 예제에서는 헤더 영역(테이블의 첫 줄)은 제외하고,

나머지 영역만 마우스 오버시 배경색 변경을 적용해 보도록 하겠습니다.

 

 

  헤더는 제외하고, 배경색 변경  

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>30</td>
  </tr>
  <tr>
    <td>David</td>
    <td>33</td>
  </tr>
</table>
  

table, td, th {
  border: 1px solid black;
  border-collapse: collapse;
}

table tr:not(:first-child):hover {
    background-color: GreenYellow;
}

table tr:not(:first-child):hover {

   background-color: GreenYellow;

}

:not:(:first-child) 구문을 추가하였습니다.

이렇게 하면 <tr>의 첫번째 형제 요소를 제외하고,

나머지 영역에만 CSS가 적용됩니다.

 

:not, :first-child 에 대해 더 알고 싶다면,

아래의 지난 포스팅을 참조하세요.

[HTML/CSS] 형제 요소 중 첫번째 요소 선택하기 (:first-child)

[HTML/CSS] 첫번째, 마지막 요소 제외하고 선택하기 (:not(selector))

 

 

---

 

마우스 오버시, 테이블의 선택된 열(row)의 배경색을 변경하는 방법을 알아보았습니다.