ATOZ CSS Screencast : 호버 의사 클래스

코어 포인트

의사 클래스는 마우스가 링크와 버튼 위로 떠날 때 시각적 피드백을 제공하기위한 실용적인 도구입니다. 요소의 색상, 크기 또는 방향을 바꾸는 것과 같은 다양한 방식으로 스타일링 할 수 있습니다. 그러나 터치 장치에 대한 신뢰성은 일관되지 않으며 중요한 정보를 숨기는 데 사용해서는 안됩니다.

다른 의사 클래스를 사용하여 사용자 브라우저 기록의 링크의 경우

>와 같은
• 및 현재 키보드 포커스 링크에있는 링크의 경우 :hover와 같은 다양한 링크 상태의 스타일을 설정하는 데 사용될 수 있습니다. 이들은 재설정 스타일 시트에 결합하여 프로젝트의 기본값을 설정할 수 있습니다.
의사 클래스를 사용하여 웹 사이트의 주요 탐색에서 드롭 다운 메뉴를 생성 할 수 있습니다. 여기에는 상단 메뉴 항목 위로 호버링 할 때 하위 메뉴의
• 속성을 ​​전환하는 것이 포함됩니다. 이 상호 작용이 터치 장치에서 잘 작동하도록하려면 JavaScript를 사용하여 호버 이벤트를 클릭 이벤트로 변환 할 수 있습니다. :visited :active 비디오 설명 요약 :focus 이 비디오는 텍스트 링크에서
의사 클래스의 적용을 탐색하고 다른 링크 의사 클래스를 소개합니다. 또한,
• 및 비 마우스 사용자를위한 솔루션의 단점 중 일부에 대해 논의 할 것입니다. 마지막으로, :hover에 의해 트리거 된 CSS 드롭 다운 메뉴를 생성하고 jQuery를 사용하여 터치 장치의 호환성을 향상시킵니다. display 링크 스타일

가장 일반적인 사용은 링크와 버튼을 통해 마우스를 할 때 사용자에게 시각적 피드백을 제공하는 것입니다.

링크 상태는 다음과 같이 CSS를 사용하여 설정할 수 있습니다.

:hover 콜론 이후의 :hover는 의사 클래스를 나타냅니다. 이 비디오 와이 시리즈의 나머지 부분에서는 많은 의사 클래스를 다룰 것입니다. :hover 이 예에서는 색상 스타일 만 설정되지만 모든 속성을 변경, 덮어 쓰기 또는 취소 할 수 있습니다. 필요한 경우 글꼴 크기를 늘리고 180도 링크를 회전시킬 수 있지만 권장되지 않습니다.

다른 링크 상태를 스타일링하는 데 사용할 수있는 다른 의사 클래스도 있습니다.

사용자의 브라우저 기록에서 링크를 스타일링하는 데 사용됩니다. 는 현재 클릭중인 링크를 스타일링하는 데 사용됩니다. 는 현재 키보드 초점이있는 링크를 스타일링하는 데 사용됩니다. 즉, 사용자는 탭 키를 사용하여 페이지의 클릭 가능한 항목 (예 : 링크 및 양식 입력)으로 점프합니다. 나는 스타일 시트를 재설정하여 전체 프로젝트에 대한 합리적인 기본값을 설정하는 부분 으로이 4 개의 링크 상태를 결합하고 싶습니다.

단점 :hover 상태는 링크뿐만 아니라 모든 요소에 적용될 수 있으므로 매우 보편적입니다. 그러나 터치 장치에는

를 활성화 할 마우스가 없습니다.

사용자가 링크 나 버튼을 터치하면

스타일이 때때로 적용되지만 플랫폼과 장치에서 신뢰할 수없고 일관성이 없습니다. 이것은 종종 매우 혼란 스러울 수 있으며 우리의 임무는 사용자 경험을 개선하고 악화시키지 않도록하는 것입니다! :hover 터치 장치의 경우

상호 작용 뒤에 중요한 정보를 숨기지 마십시오. 이 작업을 수행 할 수 없으면

를 JavaScript를 사용하는 클릭 이벤트로 바꿀 수 있습니다. :hover 일부 사용자는 마우스를 사용할 수 없으며 를 사용할 때 항상 :hover 및

스타일을 적용하여 경험을 향상시킬 수 있습니다. 다음과 같이 CSS의 쉼표로 분리 할 수 ​​있습니다.

Sass와 같은 CSS 전 처리기를 사용하는 경우 매번 글을 쓰지 않고 3 개의 쉼표로 구분 된 의사 클래스를 출력하는 믹스를 만들 수 있습니다. :hover :focus