CSS :hover의 효과를 어떻게 되돌릴 수 있나요?

CSS를 사용하여 :hover 효과 반전

:hover 의사 클래스를 사용하면 개발자는 마우스 포인터가 요소에 특정 스타일을 적용할 수 있습니다. 그 위로 마우스를 옮깁니다. 그러나 마우스가 요소를 떠날 때 대비 효과를 정의해야 하는 경우가 종종 있습니다.

마우스가 떠날 때 트리거되는 :hover 대신 CSS 대안이 있나요?

마우스 입력 시 활성화되는 :hover와 반대되는 효과를 얻으려면 hover의 정의를 기억하는 것이 중요합니다. 즉, 마우스가 요소 위로 지나갈 때 요소를 선택합니다. 따라서 이 동작을 반전시키려면 마우스가 요소 위에 아닌 모든 지점을 대신 타겟팅할 수 있습니다.

역효과 구현

마우스를 올리면 메뉴 항목의 색상이 #999에서 검은색으로 전환되는 사용 사례를 생각해 보세요. 마우스를 떠날 때 반대 효과를 만들기 위해 마우스 오버 상태가 아닌 링크 자체로 전환을 이동할 수 있습니다.

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

이 솔루션을 사용하면 마우스를 놓을 때 색상 전환이 검정색에서 #999로 발생합니다. 링크 영역을 떠납니다.

또한 CSS-tricks에서는 마우스 오버와 마우스 오프 모두에 대해 서로 다른 전환을 설정하는 방법을 보여주는 기사를 제공했습니다. 상태:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

위 내용은 CSS :hover의 효과를 어떻게 되돌릴 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!