jQuery实现第二列单元格悬停显示、移出自动隐藏的方法

核心问题排查 #

• 选择器层级错配：.capital类是直接绑定在目标表格单元格（td）上的，原代码先选中.capital元素，再在其内部查找td子元素，实际无法匹配到任何节点，后续的样式添加、隐藏操作全部失效。
• 隐藏逻辑不成立：直接对td元素执行隐藏操作时，元素本身会被设置为display: none，完全脱离页面布局，无法接收鼠标悬停事件，自然无法触发后续的显示逻辑。
• 事件绑定失效：基于错误的内部查找结果绑定事件，自然无法响应鼠标操作。

适配需求的完整实现代码 #

$(document).ready(function(){
    // 选中所有第二列带capital类的单元格
    const $capitalCells = $('.capital');
    // 为单元格添加指定样式类，默认隐藏单元格内部的内容，保留单元格本身的布局占位
    $capitalCells.addClass('column-bar')
                 .children('span')
                 .hide();

    // 绑定单元格的悬停交互
    $capitalCells.on({
        mouseenter: function() {
            // 鼠标移入：仅显示当前悬停单元格的内部内容
            $(this).children('span').show();
        },
        mouseleave: function() {
            // 鼠标移出：隐藏当前单元格的内部内容
            $(this).children('span').hide();
        }
    });
});

实现逻辑说明 #

关键注意点：绝对不要直接隐藏整个td单元格，否则元素脱离布局后，鼠标无法触发任何悬停事件，交互会完全失效。

• 范围严格限定：所有逻辑仅作用于带.capital类的第二列单元格，不会影响表格其他列的正常显示。
• 交互效果匹配：默认状态下仅文本内容隐藏，单元格格子保留布局占位；鼠标移入对应格子时，单独显示当前悬停单元格的内容；鼠标移出后内容自动隐藏。
• 稳定性优化：不使用toggle类的无明确逻辑方法，拆分移入、移出的独立操作，避免快速划过单元格时出现显示状态不同步的问题。

内容的提问来源于stack exchange，提问作者fathawk