jQuery hover 事件閃爍問題：綁定對象錯誤導致

現象

$tbody.find('.heartF').each(function() {
    $(this).hover(
        function() { $(this).hide(); },
        function() { $(this).show(); }
    );
});

滑鼠移入圖片區域時，圖片快速閃爍而非穩定隱藏。

根本原因

事件綁定在圖片本身。當 mouseenter 觸發 hide()，圖片消失導致滑鼠不再位於該元素上，立即觸發 mouseleave 執行 show()，圖片再次出現 → 觸發 mouseenter → 無限循環閃爍。

解決方案：綁定在容器元素

1. 為每個圖片包裝一個固定尺寸的容器（<div> 或 <span>）。
2. 將 hover 綁定在容器上，操作內部圖片顯示/隱藏。
3. 容器設定 width/height 或 display:inline-block 保持佈局不塌陷。

修正程式碼

<!-- HTML 結構 -->
<div class="heart-container" style="width:32px;height:32px;display:inline-block;">
    <img class="heartF" src="heart.png" alt="" style="display:block;" />
</div>

<!-- jQuery -->
$('.heart-container').hover(
    function() { $(this).find('.heartF').hide(); },
    function() { $(this).find('.heartF').show(); }
);

替代方案：CSS :hover 偽類（無 JS）

.heart-container:hover .heartF { display: none; }

純 CSS 解決方案效能最佳、無閃爍、無需 JS 綁定。

最佳實踐

• 互動狀態切換優先考慮 CSS :hover、:focus、:active。
• JS 事件綁定時，確保觸發元素與被操作元素分離，避免佈局抖動導致事件迴圈。
• 若需動畫，使用 opacity + visibility 或 transform，而非 display 切換。