CSS에서 의사 클래스 선택기 가리키기 사용을 보여주는 예-CSS 튜토리얼-php.cn

CSS에서 의사 클래스 선택기 가리키기 사용을 보여주는 예

yulia

풀어 주다： 2018-10-23 15:47:21

원래의

5249명이 탐색했습니다.

페이지 레이아웃 중에 CSS의 호버 선택기가 자주 사용됩니다. 프런트엔드 개발자로서 CSS 의사 클래스 선택기 호버를 사용하는 방법을 알고 있나요? 이 기사에서는 CSS에서 hover를 사용하는 방법을 설명하고 예제를 통해 이를 시연할 것이며 관심 있는 친구들이 살펴볼 수 있습니다. 의사 클래스 선택기 호버는 링크 위로 마우스를 이동할 때 글꼴 크기, 배경색, 표시 및 숨기기 등과 같은 몇 가지 특수 스타일을 설정할 수 있습니다.

참고: 의사 클래스 선택기 가리키기는 링크뿐만 아니라 모든 요소에서 작동할 수 있습니다.

hover와 유사한 선택기에는 링크, 방문 및 활성이 포함됩니다. 링크 선택자는 방문하지 않은 링크 스타일을 설정할 수 있고, 방문 선택자는 방문한 링크 스타일을 설정할 수 있으며, 활성 선택자는 활성화된 링크 스타일을 설정할 수 있습니다. 잘 모르는 학생은

CSS 동영상 튜토리얼
을 참조하세요.

사용법 1:
마우스가 링크 위로 지나갈 때 자체 스타일 변경(호버 후 스타일이 직접 연결됨)

설명: 마우스가 넘어가면 a 태그의 글꼴 색상이 빨간색으로 변경되고 글꼴이 커지는 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">欢迎大家来PHP中文网学习交流</a>
</body>
</html>

로그인 후 복사

첫 번째 사진은 원본 효과이고, 두 번째 사진은 마우스가 지나간 후의 효과입니다.

CSS에서 의사 클래스 선택기 가리키기 사용을 보여주는 예

사용법 2: CSS에서 의사 클래스 선택기 가리키기 사용을 보여주는 예 가상 클래스 선택기 가리키기를 사용하여 하위 요소의 스타일을 제어합니다(마우스를 가리킨 후 공백을 추가한 다음 요소의 스타일을 변경합니다).

설명: 마우스가 div 위로 지나가면 하위 요소의 색상이 보라색으로 바뀌고 글꼴이 커지며 빨간색 테두리가 나타납니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="aa">望子成龙，望女成凤</a>
		</div>
	</body>
</html>

로그인 후 복사

효과는 아래 그림과 같습니다.

사용법 3: CSS에서 의사 클래스 선택기 가리키기 사용을 보여주는 예 마우스가 지나갈 때 형제 요소의 스타일을 제어합니다(마우스를 가리킨 후 "+"를 추가한 다음 요소의 스타일을 변경합니다)

설명: 마우스가 지나갈 때 배경색 형제 요소가 노란색으로 변경되고 글꼴 크기가 커집니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box1:hover + .box2{font-size: 30px ;background: yellow;}
		</style>
	</head>
	<body>
		<div class="box1">床前明月光</div>
		<div class="box2">疑是地上霜</div>
	</body>
</html>

로그인 후 복사

Rendering:

위 내용은 CSS에서 의사 클래스 선택기 hover를 사용하는 방법을 소개합니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 CSS에서 의사 클래스 선택기 가리키기 사용을 보여주는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!