[JS] 마우스 커서 올라갔을 시 이벤트 발생 ( feat. hover )

기존에 게시판을 만들 때 제목 위에 마우스 커서를 올리면 게시판 table안의 tr태그의 background에 배경색을 주는

onmouseover과 onmouseout이벤트를 사용했다. (전자정부에 있던 기능을 가져오느라...)

그런데 같이 일하는 담당분의 조언에 따라 단순 css변경인데 굳이 javascript의 이벤트를 사용할 필요가 있냐고 해서

hover로 바꾸었다.

마우스 커서 올리면 <tr> 배경색 변경

기존에 있던 onmouseover, onmouseout 이벤트를 활용한 코드는 다음과 같다.

해당 <tr>에 마우스 커서가 올라 갔을 경우

onmouseover이벤트가 실행되며 해당 코드가 실행된다.

해당 <tr>에서 마우스 커서가 나가면

onmouseout이벤트가 실행되면서 해당 코드가 실행된다.

 

이것을 다음과 같이 <tr>에 css를 주었다.

hover을 활용하여 배경색 변경

이렇게 css를 작성해주면 해당 tr에 마우스가 올라가면 배경색이 #FCE6E0으로 바뀌고

마우스가 내려오면 다시 기본색인 흰색배경으로 변경된다