Div 跟隨滑鼠方向顯示/隱藏：CSS hover + JS 滑鼠軸向判斷

百度新聞媒體模組：滑鼠水平移入顯示，垂直移入隱藏，或依方向決定動畫。

實現思路

1. 容器 `position:relative`，子面板 `position:absolute; display:none`。
2. 容器綁 `mousemove` 事件，計算 `e.clientX - lastX`、`e.clientY - lastY` 判斷主方向。
3. 水平位移大於垂直 → `panel.style.display='block'`；垂直大於水平 → `display='none'`。
4. 或用純 CSS `:hover` 顯示，配合 `transition` 動畫，無法區分方向但簡單。

JS 核心片段

let lastX=0, lastY=0;
container.addEventListener('mousemove', e => {
    const dx = e.clientX - lastX, dy = e.clientY - lastY;
    lastX = e.clientX; lastY = e.clientY;
    panel.style.display = Math.abs(dx) > Math.abs(dy) ? 'block' : 'none';
});

進階：用 `IntersectionObserver` 或 `mouseenter`/`mouseleave` 避免抖動。