직장에서 페이지를 동적으로 만들기 위해 프런트 엔드 개발자는 종종 페이지에 마우스 패스 및 마우스 아웃 효과를 추가하여 페이지를 더욱 매력적으로 만듭니다. 이 글에서는 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는 링크를 클릭할 때 스타일을 설정합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!