JavaScript 없이 CSS 전환 지연:호버 효과를 사용할 수 있나요?

CSS에서 :hover 효과 지연

질문:

JavaScript를 사용하지 않고 CSS :hover 이벤트를 활성화하시겠습니까? 특히, 호버 효과 지연을 위해 널리 사용되는 jQuery 플러그인인 hoverIntent의 기능을 시뮬레이션하면서 이를 달성할 수 있는 방법은 무엇입니까?

답변:

CSS 전환을 활용하여 지연을 수행할 수 있습니다. : 호버 효과. 예는 다음과 같습니다.

div {
    transition: 0s background-color;
}

div:hover {
    background-color: red;
    transition-delay: 1s;
}

이 예에서는 요소 위에 마우스를 올려놓은 후 1초가 될 때까지 요소의 배경색이 빨간색으로 변경되지 않습니다.

여기에 더 완전한 데모가 있습니다. 여기에는 마우스를 올리거나 끌 때의 지연이 포함됩니다.

div {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border: 1px solid #ccc;
    transition: 0s background-color;
    transition-delay: 1s;
}

div:hover {
    background-color: red;
}

<div>delayed hover</div>

위 내용은 JavaScript 없이 CSS 전환 지연:호버 효과를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!