긴 호버

최근에 나는 다소 창피한 CSS 감독을 만났다. 나는 좁은 사이드 바가 포함 된 아이콘이있는 웹 사이트를 개발하고있었습니다. 설명 텍스트를위한 공간이 부족한 디자인은 연장 된 호버로 트리거 된 접근 가능하지만 처음에는 숨겨진 툴팁을 요구했습니다. 툴팁은 3 초 호버 후에 나타납니다.

나의 초기 접근 방식은 JavaScript State Management와 관련이 있습니다.

1. 툴팁 가시성 (가시/숨겨진)을 추적하는 상태 변수. 이 상태는 관련 HTML 요소의 클래스를 업데이트합니다.
2. 상태 전환을 관리하기위한 이벤트 청취자 ( mouseenter , mouseleave ).
3. 상태가 mouseenter 에서 visible 도록 설정하기 전에 3 초 지연.
4. 툴팁은 숨겨져 있습니다 ( mouseleave ).

이것은 반응 프로젝트 였으므로 JavaScript 상태를 사용하는 것은 자연스럽게 느껴졌습니다. 그러나 돌이켜 보면 불필요하게 복잡한 것으로 판명되었습니다. mouseenter 와 mouseleave 사건은 약간 신뢰할 수 없다고 느꼈으 며, 전체 기능은 CSS만으로보다 간결하고 효율적으로 구현 될 수있었습니다.

당황스러운 실현 : CSS 솔루션을 쉽게 사용할 수있을 때 불필요하게 JavaScript 라이브러리를 활용했습니다.

React UI를 유지했지만 JavaScript 상태 관리를 제거했습니다. 솔루션에는 간단한 CSS transition-delay 속성이 포함되었습니다.

 .물건 {
  전환 : 0.2S;
}
.Thing : 호버 {
  전환 지연 : 3S; / * 꺼지지 않고 호버 애니메이션 만 지연 */
}

이 우아한 1 라이너는 원하는 장거리 효과를 완벽하게 달성합니다.

그러나이 접근법은 터치 스크린 접근성을 완전히 다루지 않습니다. 스크린 리더는 액세스 가능한 텍스트를 처리하고 데스크탑 사용자는 툴팁의 혜택을받지 않지만 터치 전용 사용자는 아이콘 레이블을 놓칠 수 있습니다. 내 프로젝트는 커서 가용성을 가정하면 대형 화면을 대상으로했지만 터치 접근성은 여전히 ​​문제가되지 않습니다. 요소가 링크 인 경우 :hover 활성화 될 수 있습니다. 링크가 명확한 제목이있는 페이지로 이어지면 충분한 컨텍스트를 제공 할 수 있습니다. 그렇지 않으면 터치 이벤트에 대한 JavaScript 이벤트 처리는 여전히 실행 가능한 옵션입니다.

위 내용은 긴 호버의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!