CSS 동적 의사 클래스 속성: hover, active 및 focus

CSS 동적 의사 클래스 속성: hover, active 및 focus, 특정 코드 예제가 필요합니다.

프론트 엔드 개발에서 CSS는 페이지의 스타일과 레이아웃을 구현할 수 있는 매우 중요한 기술입니다. 기본 스타일 설정 외에도 CSS는 사용자가 요소와 상호 작용할 때 요소의 스타일을 변경할 수 있는 hover, active 및 focus와 같은 일부 동적 의사 클래스 속성도 제공합니다. 이 문서에서는 이러한 세 가지 동적 의사 클래스 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. Hover 의사 클래스 속성

hover는 사용자가 요소 위로 마우스를 가져갈 때 트리거되는 의사 클래스 속성입니다. hover 속성을 설정하면 마우스를 올렸을 때 요소의 스타일을 변경할 수 있습니다. 구체적인 예는 다음과 같습니다.

HTML 코드는 다음과 같습니다.

<button class="button">悬停我</button>

CSS 코드는 다음과 같습니다.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:hover {
  background-color: red;
}

위 예에서는 버튼 요소를 생성했습니다. 초기 상태에서 버튼의 배경색은 다음과 같습니다. 파란색이고 텍스트는 흰색입니다. 마우스를 버튼 위로 가져가면 버튼의 배경색이 빨간색으로 변경됩니다.

2. 활성 의사 클래스 속성

active는 사용자가 요소를 클릭할 때 트리거되는 의사 클래스 속성입니다. active 속성을 설정하면 클릭 시 요소의 스타일을 변경할 수 있습니다. 구체적인 예는 다음과 같습니다.

HTML 코드는 다음과 같습니다.

<button class="button">点击我</button>

CSS 코드는 다음과 같습니다.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:active {
  background-color: green;
}

위 예에서는 버튼 요소를 생성했습니다. 초기 상태에서 버튼의 배경색은 다음과 같습니다. 파란색이고 텍스트는 흰색입니다. 사용자가 버튼을 클릭하면 버튼의 배경색이 녹색으로 변경됩니다.

3. 포커스 의사 클래스 속성

focus는 사용자가 요소에 포커스를 둘 때 트리거되는 의사 클래스 속성입니다. 일반적으로 입력 상자와 같은 양식 요소에 사용됩니다. 다음은 구체적인 예입니다.

HTML 코드는 다음과 같습니다.

<input type="text" class="input">

CSS 코드는 다음과 같습니다.

.input {
  border: 1px solid gray;
  padding: 5px;
}

.input:focus {
  border-color: blue;
}

위 예에서는 입력 상자 요소를 생성했으며 입력 상자의 테두리 색상은 회색입니다. 초기 상태. 사용자가 입력 상자에 포커스를 놓으면 입력 상자의 테두리 색상이 파란색으로 변경됩니다.

hover, active 및 focus 의사 클래스 속성은 사용자가 요소와 상호 작용할 때만 트리거되므로 페이지 스타일을 디자인할 때 사용자의 작업 습관을 고려해야 합니다.

요약:

CSS의 동적 의사 클래스 속성은 요소의 스타일을 변경하여 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 일반적으로 사용되는 세 가지 동적 의사 클래스 속성인 hover, active 및 focus에 대해 알아보고 구체적인 코드 예제를 제공했습니다. 이 글이 여러분의 프론트엔드 개발에 도움이 되기를 바랍니다.

위 내용은 CSS 동적 의사 클래스 속성: hover, active 및 focus의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!