실행 가능한 CSS 문서: CSS hover

Q: CSS에서 hover 효과는 어떻게 넣나요?

선택자 뒤에 :hover를 붙인 규칙을 써요. .btn:hover { background: #1d4ed8; } 포인터가 요소 위에 있는 동안 선언이 적용돼요. 변화를 애니메이션으로 만들려면 일반 규칙에 transition: background 0.2s;를 추가하세요.

Q: :hover와 :active는 무엇이 다른가요?

:hover는 포인터가 요소 위에 있는 동안 적용돼요. :active는 마우스 버튼을 누른 순간부터 뗄 때까지, 요소를 누르고 있는 동안 적용돼요. 누르고 있는 버튼은 보통 hover이면서 active예요.

Q: 링크 가상 클래스는 어떤 순서로 써야 하나요?

:link, :visited, :hover, :active 순서예요(LVHA, 또는 "LoVe HAte"로 외워요). 명시도가 같아서 나중 규칙이 이기기 때문에, 다른 순서로 쓰면 visited나 hover 스타일이 hover나 active 스타일을 가릴 수 있어요.

Q: CSS로 링크 색은 어떻게 바꾸나요?

a 요소를 꾸며요. a { color: #2563eb; } 그리고 다른 상태에는 a:visited { color: #7c3aed; }, a:hover { color: #1d4ed8; }를 써요. a에 color를 지정하면 방문하지 않은 링크와 방문한 링크 모두에 적용돼요.

Q: 모바일에서도 hover가 동작하나요?

터치 화면에는 요소 위에 머무는 포인터가 없어요. 대부분의 모바일 브라우저는 탭하면 :hover를 적용하고 다른 곳을 탭할 때까지 유지해서 hover 스타일이 멈춰 있을 수 있어요. hover 전용 효과는 @media (hover: hover)로 감싸고, 꼭 필요한 콘텐츠를 hover 뒤에 숨기지 마세요.

:hover의 동작 방식

:hover는 마우스 포인터가 요소 위에 있는 동안 일치하는 가상 클래스예요. 아무 선택자에나 붙이고 hover 상태의 스타일을 적으세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

:hover 규칙의 선언만 바뀌고, 나머지는 .btn에서 그대로 이어져요. 포인터가 떠나면 요소는 원래 스타일로 돌아가요.

transition으로 부드러운 hover 효과

hover 변화는 즉시 일어나요. :hover 규칙이 아니라 일반 규칙에 transition을 추가하면 들어갈 때와 나올 때 모두 애니메이션이 돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform과 opacity는 애니메이션 비용이 가장 적은 속성이에요. 주변 요소를 움직이지 않아요. width, height, margin을 애니메이션하면 매 프레임마다 페이지가 리플로우돼요. 지속 시간, 지연, easing 곡선은 CSS transition 페이지에 있어요.

링크 색상: :link, :visited, :hover, :active

링크에는 고전적인 상태 네 가지와 키보드 포커스가 있고, 규칙의 순서가 중요해요.

가상 클래스	적용되는 때
`:link`	링크를 방문하지 않았을 때
`:visited`	URL이 브라우저 기록에 있을 때
`:hover`	포인터가 위에 있을 때
`:active`	누르고 있을 때
`:focus-visible`	키보드 포커스를 가졌을 때

모두 명시도가 같아서 둘이 일치하면 나중 규칙이 이겨요. hover 중인 방문한 링크는 :visited와 :hover 모두와 일치해요. :visited가 마지막에 오면 hover 색은 절대 보이지 않아요. 안전한 순서는 Link, Visited, Hover, Active(LVHA)예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

브라우저는 페이지가 방문 기록을 읽지 못하도록 :visited로 바꿀 수 있는 것을 제한해요. 색 관련 속성(color, background-color, border-color, outline-color 등 몇 가지)만 효과가 있고, 스크립트는 항상 방문하지 않은 상태의 값을 봐요.

:active: 누른 상태

:active는 요소를 누르고 있는 동안 일치해요. 살짝 움직이게 하면 버튼이 실제로 눌리는 느낌이 들어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

부모에 hover해서 자식 꾸미기

hover 상태는 포인터 아래의 요소와 그 모든 조상에 속해요. 그래서 .card:hover .title은 카드의 어느 부분에든 hover하면 제목을 꾸며요. 같은 방식으로 숨겨진 요소를 드러낼 수도 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

:focus-within 줄이 중요해요. 이게 없으면 Tab 키로 Delete 버튼에 도착한 키보드 사용자는 보이지 않는 버튼을 누르게 돼요. hover로 드러내는 모든 것에는 focus 규칙을 짝지어 주세요.

터치 화면의 hover

휴대폰과 태블릿에는 요소 위에 머무는 포인터가 없어요. 대부분의 모바일 브라우저는 첫 탭에서 :hover를 적용하고 다른 곳을 탭할 때까지 유지해서 hover 스타일이 멈춘 것처럼 보일 수 있어요. 두 가지 규칙으로 관리하세요.

콘텐츠에 닿는 유일한 방법을 :hover 뒤에 두지 마세요. hover로 열리는 메뉴는 클릭으로도 열려야 해요.
순수하게 장식용인 hover 효과는 진짜 hover 장치인지 확인하는 미디어 쿼리로 감싸세요.

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

자주 하는 실수

콜론 앞에 공백 넣기. .btn :hover는 ".btn 안의 hover된 요소"라는 뜻이에요. .btn:hover로 쓰세요.
transition을 :hover 규칙에만 두기. 들어갈 때는 애니메이션되지만 나올 때는 확 돌아가요. 일반 규칙에 두세요.
링크 순서 오류. :link, :visited, :hover, :active 순서를 지키세요.
focus 스타일 없는 hover. 키보드 사용자는 :hover를 절대 발생시키지 않아요. 상호작용하는 요소에는 :focus-visible 스타일도 주세요.
다른 요소에 덮인 요소에 hover. 보이지 않는 오버레이(흔히 absolute 가상 요소)가 포인터를 가로챌 수 있어요. 오버레이에 pointer-events: none을 주면 해결돼요.

자주 묻는 질문

CSS에서 hover 효과는 어떻게 넣나요?

선택자 뒤에 :hover를 붙인 규칙을 써요. .btn:hover { background: #1d4ed8; } 포인터가 요소 위에 있는 동안 선언이 적용돼요. 변화를 애니메이션으로 만들려면 일반 규칙에 transition: background 0.2s;를 추가하세요.

:hover와 :active는 무엇이 다른가요?

:hover는 포인터가 요소 위에 있는 동안 적용돼요. :active는 마우스 버튼을 누른 순간부터 뗄 때까지, 요소를 누르고 있는 동안 적용돼요. 누르고 있는 버튼은 보통 hover이면서 active예요.

링크 가상 클래스는 어떤 순서로 써야 하나요?

:link, :visited, :hover, :active 순서예요(LVHA, 또는 "LoVe HAte"로 외워요). 명시도가 같아서 나중 규칙이 이기기 때문에, 다른 순서로 쓰면 visited나 hover 스타일이 hover나 active 스타일을 가릴 수 있어요.

CSS로 링크 색은 어떻게 바꾸나요?

a 요소를 꾸며요. a { color: #2563eb; } 그리고 다른 상태에는 a:visited { color: #7c3aed; }, a:hover { color: #1d4ed8; }를 써요. a에 color를 지정하면 방문하지 않은 링크와 방문한 링크 모두에 적용돼요.

모바일에서도 hover가 동작하나요?

터치 화면에는 요소 위에 머무는 포인터가 없어요. 대부분의 모바일 브라우저는 탭하면 :hover를 적용하고 다른 곳을 탭할 때까지 유지해서 hover 스타일이 멈춰 있을 수 있어요. hover 전용 효과는 @media (hover: hover)로 감싸고, 꼭 필요한 콘텐츠를 hover 뒤에 숨기지 마세요.