CSS :hover 효과 : 링크 색 변화
CSS :hover는 마우스를 올린 태그나 속성 등을 선택합니다. 이렇게 : 콜론이 붙은 요소는 가상 클래스라고 부릅니다.
예를 들어 위키백과 등에서 링크에 마우스를 올렸을 때 텍스트 색이 변하는 효과는 :hover를 사용한 것입니다.
<a> 태그에 :hover를 붙이면, <a>태그에 마우스를 올렸을 때에 CSS 효과를 지정할 수 있습니다.
마우스를 올리면, <a>태그의 글씨색이 붉은색으로 변하는 CSS 코드입니다.
a:hover {
color:red;
}
본문코드
<html>
<head>
<style>
a:hover {
color:red;
}
</style>
</head>
<body>
<a href="https://www.wikipedia.org">위키백과</a>
</body>
</html>
결과
CSS :hover 일반 태그도 가능
:hover는 <h1> 태그 등 링크가 없는 일반적인 태그나 속성에도 대부분 사용할 수 있습니다.
<h1> 태그에 마우스를 올리면, 배경색이 변하는 :hover 효과 예시입니다.
h1:hover {
background-color:yellow;
}
본문코드
<html>
<head>
<style>
h1:hover {
background-color:yellow;
}
</style>
</head>
<body>
<h1>핫!</h1>
</body>
</html>
결과
