마우스가 요소를 떠난 후 CSS 호버 상태를 어떻게 활성 상태로 유지할 수 있습니까?

"호버링 취소" 후 CSS 호버 상태 유지

웹 디자인에서 호버 상태는 호버링 시 추가 콘텐츠나 효과를 표시하는 데 자주 사용됩니다. 요소 위에. 그러나 이 상태는 일반적으로 마우스 포인터가 요소를 벗어나면 사라집니다. 이 기사에서는 "호버링 해제" 후에도 호버 상태를 유지하는 CSS 솔루션을 살펴봅니다.

문제

많은 초보자는 호버 상태를 유지해야 하는 문제에 직면합니다. 예를 들어 다음 예제 코드를 고려해 보세요.

#about:hover #onabout {
  display: block;
}

#about 요소 위로 마우스를 가져가면 #onabout 요소가 표시됩니다. 하지만 hover 상태가 끝나면 바로 사라집니다.

CSS 솔루션

다행히 CSS에서는 Transition-Delay를 이용한 솔루션을 제공합니다. 이 속성은 CSS 전환을 적용하기 전에 기다리는 시간을 지정합니다. 0이 아닌 값으로 설정하면 마우스 오버 후 잠시 동안 마우스 오버 상태를 유지할 수 있습니다.

div img {
  transition: 0s 180s;
  opacity: 0;
}

div:hover img {
  opacity: 1;
  transition: 0s;
}

이 코드는 마우스 오버 후 180초 동안 이미지(img)가 표시되도록 보장합니다.

대체 접근 방식

변환 및 포커스를 사용하는 또 다른 CSS 기술 클릭 후 이미지가 페이드 아웃됩니다.

div:hover img:focus {
  transition: 3s;
  opacity: 0;
  transform: rotate(-360deg) scale(0.23);
}

이 접근 방식을 사용하려면 요소를 HTML 마크업에 추가하고 이미지를 클릭하면 페이딩 효과가 발생합니다.

이러한 CSS 기술을 사용하면 마우스를 올려 놓은 후에도 마우스를 가져간 상태를 유지할 수 있어 웹페이지의 사용자 경험이 향상됩니다.

위 내용은 마우스가 요소를 떠난 후 CSS 호버 상태를 어떻게 활성 상태로 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!