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

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

소개:
CSS 동적 의사 클래스 속성은 상호 작용 및 동적 효과를 구축하는 데 중요한 도구입니다. 그중 hover, active, focus는 가장 일반적으로 사용되는 세 가지 의사 클래스 속성입니다. 이 기사에서는 이러한 세 가지 의사 클래스 특성의 사용법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. hover 의사 클래스 속성:
   hover 의사 클래스 속성은 마우스가 요소 위에 있을 때 스타일을 지정하는 데 사용됩니다. 일반적인 응용 프로그램에는 링크 색상 변경, 숨겨진 콘텐츠 표시 등이 포함됩니다.

샘플 코드:

a:hover {
  color: red;
}

.div:hover {
  display: block;
}

위의 예에서 마우스를 링크 위로 가져가면 색상이 빨간색으로 변경됩니다. .div 요소 위로 마우스를 가져가면 표시됩니다. 원래 숨겨져 있음) ).

2. active pseudo-class 속성:
   active pseudo-class 속성은 마우스를 눌렀을 때 스타일을 지정하는 데 사용됩니다. 일반적으로 버튼 누르기 효과나 링크 클릭 효과를 만드는 데 사용됩니다.

샘플 코드:

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

a:active {
  color: blue;
}

위의 예에서 버튼을 누르면 배경색이 노란색으로 바뀌고, 링크를 클릭하면 링크 텍스트 색상이 파란색으로 변합니다.

3. focus 의사 클래스 속성:
   focus 의사 클래스 속성은 현재 포커스가 있는 요소의 스타일을 지정하는 데 사용됩니다. 주로 사용자가 입력하는 필드를 표시하기 위해 양식 요소에 사용됩니다.

샘플 코드:

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}

위의 예에서 입력 상자에 초점이 맞춰지면 테두리가 녹색으로 바뀌고, 텍스트 필드에 초점이 맞춰지면 노란색 그림자 효과가 표시됩니다.

요약:
CSS 동적 의사 클래스 속성은 상호 작용 및 동적 효과를 만드는 데 중요한 도구이며, 그중 hover, active 및 focus는 가장 일반적인 세 ​​가지 의사 클래스 속성입니다. 이러한 의사 클래스 속성을 합리적으로 사용하면 마우스 상호 작용 및 포커스 상태 중에 페이지 요소의 스타일 변경을 쉽게 실현할 수 있습니다. 위의 예가 독자가 이러한 속성을 더 잘 이해하고 사용하여 보다 대화형이고 동적인 웹 페이지 효과를 만드는 데 도움이 되기를 바랍니다.

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