> 웹 프론트엔드 > CSS 튜토리얼 > CSS :hover의 효과를 어떻게 되돌릴 수 있나요?

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

Mary-Kate Olsen
풀어 주다: 2024-12-16 03:52:10
원래의
223명이 탐색했습니다.

How Can I Reverse the Effects of 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿