yiekheng/sunnymh-manga-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reader: broaden hover-nav detection to hybrid devices

Browse Source 
(hover: hover) matches only when the primary input is mouse-like, which
excludes touch-laptops, iPads with a trackpad, and some other hybrid
configurations. Switch to (any-hover: hover) plus a one-shot mousemove
fallback so any mouse movement unlocks the hover-reveal behavior.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yiekheng 2026-04-15 22:27:57 +08:00
parent 6eff1f68fc
commit fb2b032d73
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/PageReader.tsx
View File

@ -85,7 +85,16 @@ export function PageReader({
const [canHover, setCanHover] = useState(false); const [canHover, setCanHover] = useState(false);
const [hoveringNav, setHoveringNav] = useState(false); const [hoveringNav, setHoveringNav] = useState(false);
useEffect(() => { useEffect(() => {
setCanHover(window.matchMedia("(hover: hover)").matches); if (window.matchMedia("(any-hover: hover)").matches) {
setCanHover(true);
return;
}
const onMove = () => {
setCanHover(true);
window.removeEventListener("mousemove", onMove);
};
window.addEventListener("mousemove", onMove);
return () => window.removeEventListener("mousemove", onMove);
}, []); }, []);
const imagesRef = useRef(images); const imagesRef = useRef(images);