[CSS] 4. 마우스를 가져다 댔을때 변화를 줘보쟈. (hover)

해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.

이번에는 링크에 마우스를 가져다 댔을때 변화를 주는것을 해보겠습니다.

이번에 사용할 hover와 셋트로 묶이는 것들은 총 4가지 입니다.

<style>
a:link {  } // 일반
a:visited {  } // 이미 해당 링크로 한번이상 접속한 기록이 있는 경우
a:hover {  } // 마우스를 링크 위로 올렸을 경우
a:active {  } // 마우스로 링크를 클릭했을 경우
</style>

일반적으로 hover를 많이 사용합니다.

a 태그에 마우스를 가져다 댔을경우 글자색을 바꿔보겠습니다.

<style>
    body { margin:0px; }
    a:hover { color:#fff; }
</style>

<div style="background:red;"><a href="">abc</a></div>

마우스를 가져다 댔을 경우.

출처 : Pure Ani's Blog