CSS :hover pseudo-class

정의와 사용법

CSS :hover 파seudo-class는 마우스 오버 시 요소를 선택하는 데 사용됩니다。

ヒント：:hover 파seudo-class는 링크뿐만 아니라 모든 요소에 대해 사용할 수 있습니다。

ヒント：사용하십시오 :link 방문하지 않은 페이지의 링크 스타일을 설정하려면 사용합니다 :visited 방문한 페이지의 링크 스타일을 설정하려면 사용합니다 :active 활성 링크의 스타일을 설정합니다。

주의사항：CSS 정의에서는，:hover 위치에 :link 와 :visited（존재할 경우）적용됩니다！

예제

예제 1

마우스 오버 시 링크 스타일을 선택하고 설정하십시오：

a:hover {
  background-color: yellow;
  font-size: 18px;
}

직접 시험해 보세요

예제 2

마우스 오버 시 <p>、<h1> 및 <a> 요소의 스타일을 선택하고 설정하십시오：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

직접 시험해 보세요

예제 3

미방문, 방문한, 마우스를 올려다둔, 활성 링크의 스타일을 선택하고 설정합니다：

/* 방문하지 않은 링크 */
a:link {
  color: green;
}
/* 방문한 링크 */
a:visited {
  color: green;
}
/* 마우스를 올려다둔 링크 */
a:hover {
  color: red;
}
/* 활성 링크 */
a:active {
  color: yellow;
}

직접 시험해 보세요

예제 4

링크에 다른 스타일을 설정합니다：

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

직접 시험해 보세요

예제 5

span 요소에��러서 <div> 요소를 표시합니다(도구 툴팁과 유사하게)：

div {
  display: none;
}
span:hover + div {
  display: block;
}

직접 시험해 보세요

예제 6

마우스를 올려다둬 "下拉" 메뉴를 표시하고 숨기기：

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

직접 시험해 보세요

CSS 문법

:hover {
  css 선언;
}

기술 세부 사항

브라우저 지원

표中之数字은 해당 가상 클래스를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

相关页面

教程：CSS 링크

教程：CSS 가상 클래스