CSS에서 액션을 사용하는 방법

CSS의 action 키워드는 마우스가 요소를 가리키거나 활성화될 때의 동작을 정의하는 데 사용됩니다. 구문: element:action { style-property: value; :hover 및 :active 의사 클래스에 적용하여 요소 모양 변경, 숨겨진 요소 표시 또는 애니메이션 시작과 같은 대화형 효과를 만들 수 있습니다.

CSS에서 액션 사용

action 키워드는 CSS에서 마우스를 가리키고 요소를 활성화할 때의 동작을 정의하는 데 사용됩니다. 지정된 이벤트가 발생할 때 적용할 스타일을 지정합니다.

구문:

<code>element:action {
  style-property: value;
}</code>

이벤트:

• hover: 마우스를 요소 위로 가져갈 때
• active: 요소가 활성화될 때(예: 버튼을 클릭할 때)

사용법:

action 키워드는 다음과 같은 다양한 대화형 효과를 만드는 데 사용할 수 있습니다.

• 요소의 배경색 변경:

<code>button:hover {
  background-color: #00FF00;
}</code>

• 테두리 추가 또는 제거:

<code>a:active {
  border: 1px solid #FF0000;
}</code>

• 요소의 글꼴 변경 크기 또는 스타일:

<code>h1:hover {
  font-size: 1.5em;
  font-weight: bold;
}</code>

• 숨겨진 요소 표시:

<code>.hidden:hover {
  display: block;
}</code>

• 애니메이션 시작:

<code>.my-element:active {
  animation: my-animation 2s infinite;
}</code>

참고:

• 액션 키워드는 다음과 같습니다. :hover 및 :active 의사 종류에만 사용할 수 있습니다.
• 액션 키워드의 범위는 정의된 이벤트로 제한됩니다.
• 여러 작업 키워드를 사용하여 다양한 이벤트에서 요소의 다양한 동작을 지정할 수 있습니다.

위 내용은 CSS에서 액션을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!