마우스 호버 이벤트의 7가지 용도
최근 웹 프론트엔드를 작성하는 과정에서 link, :visited, :hover, :active, :disabled 등과 같은 의사 클래스가 자주 사용되는 것을 발견했습니다. 그 중: link는 일반적으로 클릭되지 않은 링크의 상태를 나타내고, :visited는 클릭된 상태를 나타내고, :hover는 마우스 호버링을 나타내며, :active는 마우스를 눌렀다가 놓을 때 링크나 버튼의 상태를 나타냅니다. 비활성화됨은 요소가 비활성화되었음을 나타내는 데 자주 사용됩니다. 사용 상태. 그중 마우스 호버 상호작용(hover/onmouseover)이 가장 다양하게 적용됩니다. CSS가 호버 이벤트를 만족할 수 없을 때 이를 구현하기 위해 js를 사용하는 경우가 많습니다. 마우스오버 이벤트는 개발자와 디자이너의 마음 속에 다양한 형태로 나타날 수 있습니다. 상호 작용의 관점에서 보면 대략 다음과 같은 범주가 있습니다.
1. 가장 일반적인 범주는 클릭 가능한 요소나 웹 링크에 사용됩니다. 일반적으로 사용되는 URL은 마우스를 올리면 밑줄이 표시되고 버튼/아이콘이 표시됩니다. 마우스를 올리면 색상 및 기타 상태가 변경됩니다. 머티리얼 디자인 스타일의 경우 마우스로 선택한 카드에 그림자가 표시되어 카드가 떠 있는 것처럼 느껴지는 경우가 많습니다.
일부 아이콘 위에 마우스를 올리면 버튼의 의미나 기능을 나타내는 팁이 표시됩니다. 사용자의 마우스 움직임 동작에 대한 즉각적인 피드백을 제공하여 클릭 가능한 요소나 하이퍼링크가 선택되었으며 클릭할 수 있음을 사람들에게 상기시킵니다.
2. 탐색 시 보조 메뉴/항목 세부 정보를 표시하는 데 사용됩니다. 선택한 1차 메뉴 링크를 직접 클릭하여 표시하거나 보조 메뉴를 선택하여 더 자세한 분류 페이지로 들어갈 수 있습니다.
내비게이션의 각 옵션에 보조 메뉴가 있고 마우스를 올렸을 때 표시되는 경우 보조 메뉴가 나타나기 전에 일정 시간 지연을 두는 것이 더 좋습니다. 마우스를 올렸을 때 바로 표시된다면 네비게이션 바를 따라 마우스를 움직일 때 보조 메뉴의 표시가 사람들을 현혹시켜 사용자의 짜증을 증가시키고, 보조 메뉴가 지연되면 나중에 표시될 수 있다는 것입니다. 사용자는 특정 옵션에 잠시 머물렀다가(사용자가 이 옵션에 관심을 갖고 클릭하고 싶을 수 있음) 나타나 해당 옵션에 주의를 집중할 수 있습니다.
3.숨겨진 버튼/아이콘을 표시합니다.
일부 버튼이 있는 경우: (1) 그다지 중요하지 않은 경우, (2) 버튼이 사용자의 관심을 너무 많이 끌기를 원하지 않는 경우, (3) 모든 유사한 그림이나 모듈에는 동일한 내용의 버튼이 있습니다. 이 버튼은 사용자가 관심 있는 섹션으로 마우스를 이동할 때 표시됩니다. 예를 들어, Facebook의 광고에서는 닫기 버튼이 없는 프리롤 광고에 비해 광고 콘텐츠 위에 마우스를 올렸을 때만 닫기 버튼이 나타나며, 이는 프리롤 광고에 비해 사용자의 제어 감각을 높여줍니다. 광고 측면에서는 닫기 버튼이 항상 표시되는 경우 광고를 닫기 전에 사용자의 관심도를 높일 수 있어 광고 전환율에 유리합니다(닫기 버튼이 항상 표시되면 대부분의 경우). 사용자의 관심은 닫기 버튼에 쏠리게 되며 광고 자체를 쉽게 무시하게 됩니다. )
4. 다른 요소를 숨기거나 약화시키거나 선택한 요소를 강조하여 사용자의 관심을 집중시킵니다. 현재 페이지 내에서 제품이 더 잘 표시될 수 있습니다.
5. 이미지 마스킹을 통해 관련 요소에 대한 추가/자세한 정보를 표시하거나 선택한 요소 주위에 새 플로팅 레이어를 팝업합니다. 이를 통해 사용자는 해당 페이지로 이동하지 않고도 더 관련성 높은 정보를 얻을 수 있습니다.
6. 마우스를 올리면 자동으로 gif가 재생됩니다. 여기서 마우스를 gif 사진 위에 올리면 움직이는 사진이 아닌 움직이는 사진이 됩니다. 처음부터 계속해서 사진을 찍습니다. (동영상이 자동 재생으로 설정되는 경우가 거의 없는 이유와 같습니다.)
7. 영상의 사운드 상태나 화질 상태를 즉시 전환하는 등 전환 가능한 옵션을 표시합니다.
위는 마우스 오버 이벤트의 여러 사용법을 요약한 것입니다. 이러한 사용법에는 장점과 단점이 있습니다. 웹 페이지 요소는 해당 특성에 따라 이벤트를 트리거하기 위해 마우스 오버를 사용할지 여부를 선택해야 합니다. 비판과 수정을 환영합니다. (수동 스마일리)