마우스가 요소를 떠난 후 CSS 호버 상태를 어떻게 보존할 수 있습니까?

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

웹 디자인에서 호버 상태는 일반적으로 마우스 호버 시 추가 콘텐츠를 표시하는 데 사용됩니다. 그러나 기본적으로 이 내용은 마우스 커서가 지정된 영역을 벗어나면 사라집니다. 이 기사에서는 커서를 "unhover"한 후에도 hover 상태를 계속 표시하는 CSS 솔루션을 제시합니다.

제공된 예제에서는 ':hover' 의사 클래스를 활용하여 div 위로 마우스를 가져갈 때 이미지를 표시합니다. 그러나 호버 이벤트가 끝나면 이미지가 사라집니다. 이 문제를 해결하기 위해 다음 CSS 기술을 사용할 수 있습니다.

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

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

div {
    line-height: 1.2em;
    font-size: 1em;
    color: black;
    transition: 0s 180s;
}

div:hover {
    line-height: 0;
    font-size: 0;
    color: transparent;
    transition: 0;
}

이 코드는 절대 위치 지정, 불투명도 및 전환의 조합을 사용하여 원하는 효과를 얻습니다. 불투명도는 처음에 0으로 설정되어 이미지가 보이지 않게 됩니다. 마우스를 올리면 불투명도가 1로 설정되어 이미지가 표시됩니다. "unhover" 시 콘텐츠가 사라지는 것을 방지하기 위해 180초(3분)의 지연과 함께 전환 속성이 ​​사용됩니다. 이 지연은 불투명도 전환을 효과적으로 억제하여 이미지가 무기한 표시되도록 유지합니다.

또는 클릭해도 이미지가 계속 표시되도록 초점 이벤트를 사용할 수도 있습니다.

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

이것은 변형은 포커스 이벤트와 전환을 사용하여 이미지를 클릭한 후 페이드 아웃하고 회전하여 전환 중에 표시되도록 유지합니다.

구현 이러한 CSS 기술을 사용하면 마우스 커서가 지정된 영역을 벗어난 후에도 원하는 콘텐츠의 가시성을 유지하도록 호버 상태 동작을 수정할 수 있습니다.

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