JavaScript 없이 CSS에서 hover 효과를 어떻게 지연할 수 있나요?

CSS에서 :hover 효과 지연

JavaScript를 사용하지 않고 :hover 이벤트를 지연할 수 있나요?

다음을 활용하여 CSS에서 호버 효과 적용을 지연시킬 수 있습니다.

전환을 사용하여 :hover 효과를 지연하는 방법:

다음 CSS 코드를 고려하세요.

div {
    transition: 0s background-color;
}

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

이 예에서 전환 지연 속성은 1초로 설정됩니다. 이로 인해 :hover 상태에 들어갈 때 배경색 변경이 1초 지연됩니다.

예:

<div>delayed hover</div>

시각적 데모:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;

로그인 후 복사

}
div:hover {

background-color: red;

}

이 데모에서는 div 요소에 배경 색상 변경에 대한 지연된 호버 효과. CSS에서 호버 효과를 지연시키기 위해 전환을 활용할 수 있는 방법을 나타냅니다.

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