feat: add hover functionality and update styles

- Introduced a new hover area in index.html with interactive hover effects.
- Updated styles for hover and gesture areas for better visual feedback.
- Implemented hover event handling in hover.ts, supporting enter, move, and leave events.
- Removed unused event testing section from index.html.

Author: yunbookf

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2025 MAIYUN.NET LiteRT.ORG
+   Copyright 2026 MAIYUN.NET LiteRT.ORG
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -15,13 +15,14 @@
     </a>
 </p>
 
-A lightweight pointer event library for handling mouse, touch, and pen interactions in browsers. Provides unified APIs for down, move, click, long, drag, resize and more.
+A lightweight pointer event library for handling mouse, touch, and pen interactions in browsers. Provides unified APIs for down, move, click, long, hover, drag, resize and more.
 
 ## Features
 
 - 🖱️ Unified pointer event handling (mouse, touch, pen)
 - 📱 Mobile-friendly with touch support
 - 🎯 Click, double-click, and long-press detection
+- 👆 Hover detection with enter/move/leave callbacks
 - 🔄 Drag and drop with customizable constraints
 - 📐 Resize functionality with border detection
 - 🎨 Global cursor management
@@ -131,6 +132,28 @@ element.addEventListener('pointerdown', (e) => {
 });
 ```
 
+#### `hover(e, options)`
+
+Hover event, handles enter, move, and leave for mouse and touch.
+
+```typescript
+const cb = (e) => {
+    pointer.hover(e, {
+        enter: (e) => {
+            console.log('Pointer entered');
+        },
+        move: (e) => {
+            console.log('Pointer moving at:', e.clientX, e.clientY);
+        },
+        leave: (e) => {
+            console.log('Pointer left');
+        }
+    });
+};
+element.addEventListener('pointerdown', cb);
+element.addEventListener('pointerenter', cb);
+```
+
 #### `move(e, options)`
 
 Drag event, supports boundary detection and constraints.
@@ -348,6 +371,18 @@ interface IDownOptions {
 }
 ```
 
+### `IHoverOptions`
+
+Options for the hover function.
+
+```typescript
+interface IHoverOptions {
+    enter?: (e: PointerEvent) => void;
+    move?: (e: PointerEvent) => void;
+    leave?: (e: PointerEvent) => void;
+}
+```
+
 ### `IMoveDetail`
 
 Detailed information in the move callback.

dist/index.esm.js

@@ -40,6 +40,51 @@ function set(type) {
     }
 }
 
+function hover(oe, opt) {
+    const el = oe.currentTarget;
+    if (!el) {
+        return;
+    }
+    if (oe.pointerType === 'touch') {
+        if (el.dataset.pointerHover) {
+            return;
+        }
+        el.dataset.pointerHover = '1';
+        opt.enter?.(oe);
+        const move = function (e) {
+            opt.move?.(e);
+        };
+        const leave = function (e) {
+            opt.leave?.(e);
+            delete el.dataset.pointerHover;
+            el.removeEventListener('pointerleave', leave);
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', leave);
+            window.removeEventListener('pointercancel', leave);
+        };
+        el.addEventListener('pointerleave', leave);
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', leave);
+        window.addEventListener('pointercancel', leave);
+    }
+    else {
+        if (oe.type === 'pointerdown') {
+            return;
+        }
+        opt.enter?.(oe);
+        const move = function (e) {
+            opt.move?.(e);
+        };
+        const leave = function (e) {
+            opt.leave?.(e);
+            window.removeEventListener('pointermove', move);
+            el.removeEventListener('pointerleave', leave);
+        };
+        window.addEventListener('pointermove', move);
+        el.addEventListener('pointerleave', leave);
+    }
+}
+
 function down(oe, opt) {
     const target = oe.target;
     let { 'x': ox, 'y': oy } = getEventPos(oe);
@@ -753,4 +798,4 @@ function gesture(oe, before, handler) {
     }
 }
 
-export { addHook as addMoveHook, allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, isMoving, isTouch, long, move, removeHook as removeMoveHook, resize, scale, set as setCursor, setData as setDragData };
+export { addHook as addMoveHook, allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, hover, isMoving, isTouch, long, move, removeHook as removeMoveHook, resize, scale, set as setCursor, setData as setDragData };

dist/index.umd.js

@@ -46,6 +46,51 @@
         }
     }
 
+    function hover(oe, opt) {
+        const el = oe.currentTarget;
+        if (!el) {
+            return;
+        }
+        if (oe.pointerType === 'touch') {
+            if (el.dataset.pointerHover) {
+                return;
+            }
+            el.dataset.pointerHover = '1';
+            opt.enter?.(oe);
+            const move = function (e) {
+                opt.move?.(e);
+            };
+            const leave = function (e) {
+                opt.leave?.(e);
+                delete el.dataset.pointerHover;
+                el.removeEventListener('pointerleave', leave);
+                window.removeEventListener('pointermove', move);
+                window.removeEventListener('pointerup', leave);
+                window.removeEventListener('pointercancel', leave);
+            };
+            el.addEventListener('pointerleave', leave);
+            window.addEventListener('pointermove', move);
+            window.addEventListener('pointerup', leave);
+            window.addEventListener('pointercancel', leave);
+        }
+        else {
+            if (oe.type === 'pointerdown') {
+                return;
+            }
+            opt.enter?.(oe);
+            const move = function (e) {
+                opt.move?.(e);
+            };
+            const leave = function (e) {
+                opt.leave?.(e);
+                window.removeEventListener('pointermove', move);
+                el.removeEventListener('pointerleave', leave);
+            };
+            window.addEventListener('pointermove', move);
+            el.addEventListener('pointerleave', leave);
+        }
+    }
+
     function down(oe, opt) {
         const target = oe.target;
         let { 'x': ox, 'y': oy } = getEventPos(oe);
@@ -769,6 +814,7 @@
     exports.getDragData = getData;
     exports.getEventPos = getEventPos;
     exports.getMoveDir = getMoveDir;
+    exports.hover = hover;
     exports.isTouch = isTouch;
     exports.long = long;
     exports.move = move;

dist/index.umd.min.js

@@ -264,41 +264,52 @@
             font-size: 12px;
             box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
         }
-        .gesture-area {
-            background: #f1f5f9;
+        .hover-area {
+            background: #3b82f6;
             border-radius: 8px;
             height: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            color: #64748b;
+            color: #fff;
             font-weight: 600;
+            cursor: pointer;
+            transition: background .2s;
             touch-action: none;
-            cursor: grab;
         }
-        .gesture-area .direction {
-            font-size: 32px;
+        .hover-area:hover {
+            background: #2563eb;
+        }
+        .hover-area .status {
+            font-size: 24px;
             margin-bottom: 10px;
         }
-        .gesture-area .hint {
+        .hover-area .hint {
             font-size: 12px;
-            color: #94a3b8;
+            opacity: 0.9;
         }
-        .event-test-element {
-            width: 100px;
-            height: 100px;
-            background: #ec4899;
+        .gesture-area {
+            background: #f1f5f9;
             border-radius: 8px;
+            height: 100%;
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
-            color: #fff;
+            color: #64748b;
             font-weight: 600;
-            font-size: 12px;
-            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
             touch-action: none;
+            cursor: grab;
+        }
+        .gesture-area .direction {
+            font-size: 32px;
+            margin-bottom: 10px;
         }
+        .gesture-area .hint {
+            font-size: 12px;
+            color: #94a3b8;
+        }        
     </style>
 </head>
 <body>
@@ -415,6 +426,19 @@ <h2>scale - Zoom</h2>
                 <div class="log" id="scale-log">Scroll wheel to zoom, drag to pan</div>
             </div>
 
+            <!-- hover 演示 -->
+            <div class="demo-card">
+                <h2>hover - Hover</h2>
+                <div class="demo-area">
+                    <div class="hover-area" id="hover-area">
+                        <div class="status" id="hover-status">👆 Hover</div>
+                        <div>Hover or touch</div>
+                        <div class="hint">Pointer enter/leave</div>
+                    </div>
+                </div>
+                <div class="log" id="hover-log">Move pointer over the area</div>
+            </div>
+
             <!-- gesture 演示 -->
             <div class="demo-card">
                 <h2>gesture - Swipe</h2>
@@ -427,17 +451,7 @@ <h2>gesture - Swipe</h2>
                 </div>
                 <div class="log" id="gesture-log">Swipe up/down/left/right</div>
             </div>
-
-            <!-- event 测试 -->
-            <div class="demo-card">
-                <h2>Event Testing</h2>
-                <div class="demo-area" id="event-area">
-                    <div class="event-test-element" id="event-element">
-                        Test Element
-                    </div>
-                </div>
-                <div class="log" id="event-log">Event log will appear here</div>
-            </div>
+        
         </div>
     </div>
 
@@ -647,6 +661,31 @@ <h2>Event Testing</h2>
         scaleArea.addEventListener('pointerdown', handleScale);
         scaleArea.addEventListener('wheel', handleScale);
 
+        // --- hover 演示 ---
+        const hoverArea = document.getElementById('hover-area');
+        const hoverStatus = document.getElementById('hover-status');
+        const hoverLog = document.getElementById('hover-log');
+
+        function handleHover(e) {
+            pointer.hover(e, {
+                'enter': function(e) {
+                    hoverStatus.textContent = '✅ Entered';
+                    hoverArea.style.background = '#10b981';
+                    hoverLog.textContent = 'Pointer entered at (' + Math.round(e.clientX) + ', ' + Math.round(e.clientY) + ')';
+                },
+                'move': function(e) {
+                    hoverLog.textContent = 'Moving at (' + Math.round(e.clientX) + ', ' + Math.round(e.clientY) + ')';
+                },
+                'leave': function(e) {
+                    hoverStatus.textContent = '👆 Hover';
+                    hoverArea.style.background = '#3b82f6';
+                    hoverLog.textContent = 'Pointer left';
+                }
+            });
+        }
+        hoverArea.addEventListener('pointerdown', handleHover);
+        hoverArea.addEventListener('pointerenter', handleHover);
+
         // --- gesture 演示 ---
         const gestureArea = document.getElementById('gesture-area');
         const gestureDir = document.getElementById('gesture-dir');
@@ -676,23 +715,7 @@ <h2>Event Testing</h2>
         gestureArea.addEventListener('pointerdown', handleGesture);
         gestureArea.addEventListener('wheel', handleGesture);
 
-        // --- event 测试 ---
-        const eventElement = document.getElementById('event-element');
-        const eventLog = document.getElementById('event-log');
-
-        const events = [
-            'mousedown', 'mouseup', 'click', 'dblclick', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'contextmenu', 'wheel',
-            'touchstart', 'touchend', 'touchmove', 'touchcancel',
-            'pointerdown', 'pointerup', 'pointermove', 'pointercancel', 'pointerenter', 'pointerleave', 'pointerover', 'pointerout', 'gotpointercapture', 'lostpointercapture'
-        ];
-
-        function logEvent(e) {
-            eventLog.innerHTML = e.type + '<br>' + eventLog.innerHTML;
-        }
-
-        events.forEach(function(eventType) {
-            eventElement.addEventListener(eventType, logEvent);
-        });
+        
     </script>
 </body>
 </html>

dist/test/index.html

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024-2025 MAIYUYN.NET
+ * Copyright 2007-2026 MAIYUYN.NET
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

src/click.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024-2025 MAIYUYN.NET
+ * Copyright 2007-2026 MAIYUYN.NET
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

src/cursor.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024-2025 MAIYUYN.NET
+ * Copyright 2007-2026 MAIYUYN.NET
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

src/down.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024-2025 MAIYUYN.NET
+ * Copyright 2007-2026 MAIYUYN.NET
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.