CSS hover 스타일값을 다르게 보여주고 싶을때

CSS의 style 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.link1:hover, a.link1:active { color: red; }

a.link2:hover, a.link2:active { font-size: 150%; }

코딩을 보면 a 라는 태그에 스타일을 지정한것이지만 각각 중간에 다른 이름을 넣은것을 볼 수 있습니다. (a.link1, a.link2) 이것은 CSS를 적용하는 방법중 class 선택자를 이용한것인데, 자세한 사항은 선택자에 대해 더 공부해 보길 추천합니다.

이렇게 작성된 CSS를 HTML 문서에 적용하는 방법은 아래와 같습니다.

1
2
<p><a class="link1" href="#url">This link changes color</a></p>
<p><a class="link2" href="#url">This link changes font-size</a></p>
cs

미래디자인 life