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

:hover는 요소에 마우스를 올린 상태를 선택합니다.

문법

selector:hover { ... }

예를 들어

p:hover {
  color: red;
}

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

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</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

Created on 2017-02-27 00:33 | Updated on 2017-02-27 00:33

이 글을 공유하기

Kakao

Book navigation