가상 클래스

개요

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 태그에만 적용됩니다. 밖에는 적용되지 않습니다.