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> 

[출처] CSS - hover 마우스를 올리면 모양이 변하는 롤오버 효과 만드는 방법|작성자 이선