의사 클래스는 마우스가 링크와 버튼 위로 떠날 때 시각적 피드백을 제공하기위한 실용적인 도구입니다. 요소의 색상, 크기 또는 방향을 바꾸는 것과 같은 다양한 방식으로 스타일링 할 수 있습니다. 그러나 터치 장치에 대한 신뢰성은 일관되지 않으며 중요한 정보를 숨기는 데 사용해서는 안됩니다.
- >와 같은
- 및 현재 키보드 포커스 링크에있는 링크의 경우
:hover와 같은 다양한 링크 상태의 스타일을 설정하는 데 사용될 수 있습니다. 이들은 재설정 스타일 시트에 결합하여 프로젝트의 기본값을 설정할 수 있습니다.
의사 클래스를 사용하여 웹 사이트의 주요 탐색에서 드롭 다운 메뉴를 생성 할 수 있습니다. 여기에는 상단 메뉴 항목 위로 호버링 할 때 하위 메뉴의 - 속성을 전환하는 것이 포함됩니다. 이 상호 작용이 터치 장치에서 잘 작동하도록하려면 JavaScript를 사용하여 호버 이벤트를 클릭 이벤트로 변환 할 수 있습니다.
:visited:active비디오 설명 요약:focus이 비디오는 텍스트 링크에서 의사 클래스의 적용을 탐색하고 다른 링크 의사 클래스를 소개합니다. 또한, - 및 비 마우스 사용자를위한 솔루션의 단점 중 일부에 대해 논의 할 것입니다. 마지막으로,
:hover에 의해 트리거 된 CSS 드롭 다운 메뉴를 생성하고 jQuery를 사용하여 터치 장치의 호환성을 향상시킵니다.display링크 스타일
링크 상태는 다음과 같이 CSS를 사용하여 설정할 수 있습니다.
:hover 콜론 이후의 :hover는 의사 클래스를 나타냅니다. 이 비디오 와이 시리즈의 나머지 부분에서는 많은 의사 클래스를 다룰 것입니다. :hover
이 예에서는 색상 스타일 만 설정되지만 모든 속성을 변경, 덮어 쓰기 또는 취소 할 수 있습니다. 필요한 경우 글꼴 크기를 늘리고 180도 링크를 회전시킬 수 있지만 권장되지 않습니다.
사용자의 브라우저 기록에서 링크를 스타일링하는 데 사용됩니다.
단점 :hover
상태는 링크뿐만 아니라 모든 요소에 적용될 수 있으므로 매우 보편적입니다. 그러나 터치 장치에는
스타일이 때때로 적용되지만 플랫폼과 장치에서 신뢰할 수없고 일관성이 없습니다. 이것은 종종 매우 혼란 스러울 수 있으며 우리의 임무는 사용자 경험을 개선하고 악화시키지 않도록하는 것입니다! 를 JavaScript를 사용하는 클릭 이벤트로 바꿀 수 있습니다.
Sass와 같은 CSS 전 처리기를 사용하는 경우 매번 글을 쓰지 않고 3 개의 쉼표로 구분 된 의사 클래스를 출력하는 믹스를 만들 수 있습니다. :hover
:hover
일부 사용자는 마우스를 사용할 수 없으며 를 사용할 때 항상 :hover 및 :hover
:focus