CSS 사용 방법에 대한 자세한 설명:hover 의사 클래스 선택기(코드 포함)

직장에서 페이지를 동적으로 만들기 위해 프런트 엔드 개발자는 종종 페이지에 마우스 패스 및 마우스 아웃 효과를 추가하여 페이지를 더욱 매력적으로 만듭니다. 이 글에서는 CSS 의 hover 이벤트, CSS:hover, 사용 방법, 코드를 사용하여 CSS:hover를 사용하여 색상을 변경하는 방법을 설명합니다. 도움이 필요한 친구들은 계속해서 읽어주세요.

조심스러운 친구들은 거의 모든 웹사이트가 hover를 사용한다는 것을 알게 될 것입니다. Hover는 일반적으로 버튼, 로고, 그림과 같은 요소에 적용되지만 때로는 마우스 오버 및 마우스 아웃도 사용되지만 JavaScript입니다. 더 문제가 됩니다. CSS로 해결할 수 있으면 CSS를 사용하는 것이 좋습니다. 그러면 성능이 향상됩니다. 다음으로 hover 사용법에 대해 자세히 알아보겠습니다.

1. 정의 및 사용법

정의: 링크 위에 마우스를 올리면 특별한 스타일을 추가할 수 있습니다.

사용법: 선택기: hover{속성: 속성 값}
예:
a:hover{Background-color:yellow;}
.aa:hover{ color:#FFF;Background:#0C0;}

Hover 관련 가상 클래스:

:hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.
:link selector는 방문하지 않은 페이지의 링크 스타일을 설정합니다.
:visited selector는 방문한 페이지 링크의 스타일을 설정합니다.
:active selector는 링크를 클릭할 때 스타일을 설정합니다.

#🎜 🎜#참고: 원하는 효과를 얻으려면 :hover가 :link 및 :visited 뒤에 와야 합니다.

2. CSS:hover 메소드 예시

인스턴스 설명: 마우스가 div에 들어가면 div가 점차 커집니다. 이동 이때 div는 점차 작아지며 원래 스타일로 돌아갑니다. 이는 CSS hover 이벤트를 사용하여 달성됩니다.

HTML 부분:

<div class="aa"></div>

CSS 부분:

.aa{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .aa:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }

렌더링:

#🎜🎜 # 왼쪽 사진은 마우스를 넣기 전 스타일, 오른쪽 사진은 마우스를 넣은 후 스타일입니다.

참고: 위 내용은 CSS:hover를 사용하는 방법을 설명하며 비교적 간단합니다. 마우스를 올리면 동일한 수준의 요소 스타일이 변경될 때 인접한 형제 요소의 스타일이 변경됩니다. 즉, 요소의 하위 요소 스타일을 변경하기 위해 마우스 오버를 적용하는 한 요소의 스타일이 작동할 수 있습니다. 동시에. 다른 요소의 스타일을 변경하려면 의사 클래스를 사용하세요. 다른 요소는 hover 요소의 하위 요소여야 합니다. 여기에는 데모가 없습니다. 직접 시도해 볼 수 있습니다.

위 내용은 CSS 사용 방법에 대한 자세한 설명:hover 의사 클래스 선택기(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!