집 > 기사 > 웹 프론트엔드 > hover 의사 클래스 선택 정의 및 사용법

hover 의사 클래스 선택 정의 및 사용법

高洛峰원래의: 2016-10-29 10:21:272117검색

의사 클래스 선택기 E:hover의 정의 및 사용법:

마우스로 요소를 가리킬 때 요소의 스타일을 설정합니다.
E 요소는 클래스 선택자, ID 선택자, 유형 선택자 등 다른 선택자를 통해 선택할 수 있습니다.
특별 참고 사항: IE6은 이 선택기를 지원하지 않지만 요소의 :hover는 지원할 수 있습니다. 즉, 유형 선택기를 통해 선택한 요소의 :hover만 지원합니다.

문법 구조:

E:hover{ Rules }

브라우저 지원:

IE 브라우저는 이 선택기를 지원합니다.
Firefox는 이 선택기를 지원합니다.
Google Chrome은 이 선택기를 지원합니다.
오페라 브라우저는 이 선택기를 지원합니다.

예제 코드:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.manongjc.com/article/1323.html" />  
<title>CSS教程</title>  
<style type="text/css">  
#div:hover{color:#F60;}  
.js:hover{color:green;}  
</style>  
</head>  
<body>  
<ul>  
  <li><a href="#">html专区</a></li>  
  <li><a href="#" id="div">div+css专区</a></li>  
  <li><a href="#" class="js">javascript专区</a></li>  
  <li><a href="#">Jquery专区</a></li>  
</ul>  
</body>  
</html>

유형 선택기를 사용하여 하이퍼링크의 사전 액세스 스타일을 설정하세요.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.manongjc.com/article/1323.html" />  
<title>CSS教程</title>  
<style type="text/css">  
#div:hover{color:#F60;}  
.js:hover{color:green;}  
</style>  
</head>  
<body>  
<ul>  
  <li><a href="#">html专区</a></li>  
  <li><a href="#" id="div">div+css专区</a></li>  
  <li><a href="#" class="js">javascript专区</a></li>  
  <li><a href="#">Jquery专区</a></li>  
</ul>  
</body>  
</html>

클래스 선택기와 ID 선택기를 통해 마우스 오버 시 하이퍼링크 스타일을 설정하세요. IE6에서는 지원되지 않습니다.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="author" content="http://www.manongjc.com" />  
<title>码农教程</title>  
<style>  
div {  
  width:100px;  
  height:50px;  
  background:#ccc;  
}  
div:hover {  
  background:green;  
}  
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

위 코드는 마우스를 div 위로 가져갈 때 div의 배경색을 변경할 수 있습니다. 이는 또한 :hover 의사 클래스가 a 요소에 대한 범위 링크가 아니라는 것을 보여줍니다.

성명：

이전 기사：CSS는 1px 이내의 움직임을 구현합니다.다음 기사：CSS는 1px 이내의 움직임을 구현합니다.

hover 의사 클래스 선택 정의 및 사용법

관련 기사