CSS : 호버 선택기
예시
링크 위로 마우스를 가져갈 때 링크를 선택하고 스타일을 지정합니다.
a:hover
{
background-color: yellow;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
:hover
선택기는 요소 위로 마우스를 가져갈 때 요소를 선택하는 데 사용됩니다 .
팁: :hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.
팁: 방문하지 않은 페이지에 대한 링크의 스타일을 지정하려면 :link 선택기를 사용하고, 방문한 페이지에 대한 링크의 스타일을 지정하려면 :visited 선택기를 사용하고, 활성 링크의 스타일을 지정하려면 :active 선택기를 사용합니다.
참고: :hover는 CSS 정의에서 :link 및 :visited(있는 경우) 뒤에 와야 효과적입니다.
버전: | CSS1 |
---|
브라우저 지원
표의 숫자는 선택기를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
참고: IE 에서 :hover 선택기가 <a> 요소 이외의 다른 요소에서 작동하려면 <!DOCTYPE> 을 선언해야 합니다 .
CSS 구문
:hover {
css declarations;
}
더 많은 예
예시
<p>, <h1> 및 <a> 요소 위로 마우스를 가져갈 때 선택하고 스타일을 지정합니다.
p:hover, h1:hover, a:hover {
background-color: yellow;
}
예시
방문하지 않은 링크, 방문한 링크, 호버 링크 및 활성 링크를 선택하고 스타일을 지정합니다.
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
예시
다양한 스타일의 스타일 링크:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
예시
<span> 요소 위로 마우스를 가져가면 <div> 요소(예: 도구 설명)가 표시됩니다.
div {
display: none;
}
span:hover + div {
display: block;
}
예시
마우스를 가져갈 때 "드롭다운" 메뉴 표시 및 숨기기:
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 튜토리얼: CSS 링크
CSS 튜토리얼: CSS 의사 클래스