CSS :hover 효과? 마우스를 올린 태그를 선택!


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 1


 

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>

 

결과

css hover 2