Link
Recent Posts
Recent Comments
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
Tags more
Today
Total
관리 메뉴

목록2026/02/09 (1)

웹솔루션개발 26년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] :has()로 만드는 커스텀 커서 인터랙션 데모

화면에 **커서 전용 DOM(.cursor)**을 띄워두고, 마우스 위치를 CSS 변수 --mx, --my로 전달해 커서가 따라오도록 구성한 예제입니다.링크/버튼에 마우스를 올리면 body:has(...) 선택자로 상태를 감지해 커서 크기·표시 텍스트(예: “View”)·아이콘 표시가 자동 전환됩니다.사용 방법은 간단합니다. 페이지에 .cursor 마크업을 포함하고, 커서 상태를 바꾸고 싶은 요소에 cursor-read, cursor-icon 같은 클래스를 붙이면 됩니다.또한 JS는 mousemove 이벤트로 좌표를 받고, 약간의 지연(부드러운 추적)을 적용해 --mx/--my를 갱신합니다.참고로 :has()는 브라우저 지원 범위가 있으니(구형 환경) 운영 적용 전 호환성 체크를 권장합니다.HTML 구조..
웹프로그램밍 자료실/기타 자료 2026. 2. 9. 09:20
Prev 1 Next