CSS 탐구생활 : 마우스 커서를 올렸을 때 효과 나타내기( :hover)

 

1. hover란?

hover는 마우스를 올린 요소를 선택한다. hover에서의 스타일을 지정해주면 사용자가 마우스를 올렸을 때 요소의 스타일이 hover에서 지정해준 스타일로 바뀐다.

 

 

2. hover 사용하기

 

See the Pen Untitled by proccm (@proccm) on CodePen.

 

예시로 마우스를 올렸을 때 background-color와 color가 바뀌고 transform의 rotate함수를 실행하도록 만들어 보았다.

 

See the Pen Untitled by proccm (@proccm) on CodePen.

 

hover를 사용해 마우스를 올렸을 때 특정 문장에 밑줄이 그어지는 효과를 만들어 보았다