Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS :hover 활용법 – 마우스를 올렸을 때 링크 색상 변경하기

웹 페이지에서 :hover 가상 클래스(pseudo-class)를 사용하면 마우스 포인터가 링크 위에 올라가는 순간 링크의 색상을 손쉽게 변경할 수 있습니다. 이 기능은 사용자에게 현재 선택 가능한 요소임을 직관적으로 알려주어 웹사이트의 사용성과 인터랙션 품질을 높여 줍니다.

기본 문법

:hover는 CSS 선택자 뒤에 붙여 사용하며, 해당 요소에 마우스 포인터가 올라가 있는 동안에만 스타일이 적용됩니다.

a:hover {
   color: #FFCC00;
}

예제 코드

아래 예제는 마우스를 링크 위에 올리면 글자 색이 노란색 계열(#FFCC00)로 바뀌도록 설정한 코드입니다.

<html>
   <head>
      <style>
         a:hover {
            color: #FFCC00
         }
      </style>
   </head>
   <body>
      <a href = "">Bring Mouse Over Here</a>
   </body>
</html>

실행 결과

위 코드를 실행하고 "Bring Mouse Over Here" 링크에 마우스 포인터를 올리면, 링크 텍스트의 색상이 지정된 #FFCC00 색으로 즉시 변경되는 것을 확인할 수 있습니다. 마우스를 치우면 원래 색상으로 되돌아갑니다.

추가 팁

:hover는 링크(a 태그)뿐만 아니라 버튼, 이미지, 목록 항목 등 거의 모든 HTML 요소에 적용할 수 있습니다. 또한 color 외에도 background-color, text-decoration, transform 등 다양한 속성과 함께 조합하면 더욱 풍부한 마우스 오버 효과를 만들 수 있습니다. 참고로 모바일 환경에서는 마우스 포인터가 없기 때문에 :hover 효과가 터치 동작과 함께 일시적으로만 나타날 수 있다는 점도 유의해야 합니다.