CSS - hover 마우스를 올리면 모양이 변하는 롤오버 효과 만드는 방법
CSS - hover
마우스를 해당 객체 위에 올려놓을때 스타일값을 다르게 보여주고 싶을때 쓰면 된다.
사용하는 방법
아래를 보면 알겠지만, [적용할 태그:hover]형식으로 작성후 {} 안에 원하는 스타일을 지정해 주면 된다.
p:hover, h1:hover, a:hover {
background-color: yellow;
color: green;
font-size: 150%;
}
링크 마우스 오버 외에 다양한 상태
hover 기능은 링크와 밀접한 관련이 있기 때문에 링크의 상태와 관련해 다양한 스타일을 지정할 수 있는 다른 태그들도 알아두자.
/* 아직 방문하지 않은 링크 */
a:link {
color: green;
}
/* 이미 방문한 링크 */
a:visited {
color: green;
}
/* 마우스를 올렸을때 */
a:hover {
color: red;
}
/* 마우스로 링크를 클릭하는 중일때 */
a:active {
color: yellow;
}
같은 태그, 다른 효과
똑같은 태그지만 경우에 따라 각각 다른 CSS 효과를 적용하고 싶을 때도 있다. 이럴 경우 아래와 같이 코딩한다.
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
코딩을 보면 a 라는 태그에 스타일을 지정한것이지만 각각 중간에 다른 이름을 넣은것을 볼 수 있다. (a.ex1, a.ex2) 이것은 CSS를 적용하는 방법중 class 선택자를 이용한것인데, 자세한 사항은 선택자에 대해 더 공부해 보길 추천한다.
이렇게 작성된 CSS를 HTML 문서에 적용하는 방법은 아래와 같다.
<p><a class="ex1" href="default.asp">This link changes color</a></p>
<p><a class="ex2" href="default.asp">This link changes font-size</a></p>