개요
CSS 태그 혹은 아이디, 클래스명 설정 뒤 :이벤트 를 붙이면 특정 이벤트마다 적용 할 CSS를 사용 할 수 있으며 이를 가상 (추상)클래스라 한다.
그 중 :hover을 붙이면 CSS가 적용된 태그에 마우스가 올려졌을 때 적용할 CSS를 의미한다.
사용법
.box{ background-color:blue; } .box:hover{ background-color:red; } div#c_box span:hover {background-color:green; }
예제
<html> <head> <style> .box{ background-color:blue; } .box:hover{ background-color:red; } div#c_box span:hover {background-color:green; } </style> </head> <body> <div class="box">마우스를 올려보세요.</div><br> <div id="c_box"> <span>span 태그에만 적용됩니다. </span>밖에는 적용되지 않습니다. </div> </body> </html>
출력 결과:
마우스를 올려보세요.
span 태그에만 적용됩니다. 밖에는 적용되지 않습니다.