CSS 강좌 | 선택자 > 가상 클래스(Pseudo-classes) > :hover

:hover 가상 클래스로 요소에 마우스를 올린 상태를 선택할 수 있습니다. 예를 들어

p:hover {
  color: red;
}

는 p 요소에 마우스를 올렸을 때 글자색을 빨간색으로 만듭니다. 마우스를 다른 곳으로 이동하면 원래 모양으로 돌아옵니다.

예제

목록 위에 마우스를 올리면 글자색과 배경색이 변하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Pseudo Class - :hover</title>
    <style>
      li:hover {
        color: white;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </body>
</html>

Category

이 글을 공유하기

Kakao

Book navigation