捕捉鼠标悬停在文本上并突出显示相关值答案

【问题标题】：Catch mousve hover on text and highlight related value捕捉鼠标悬停在文本上并突出显示相关值
【发布时间】：2014-12-29 21:53:33
【问题描述】：

如果您查看附图，在第二个表格中，当光标移动到包含4 的单元格时，第一个表格中的所有对应文本都会突出显示。我设法使用hover 函数实现了这一点：

/////////////////////////////////////////////////////////////
function HightLightTable1() {

    // 0 
    $(".t1_h_x0").hover(
function () {
    $(this).css("background-color", "yellow");
    $(".t1_t_x0").css("background-color", "yellow");
}, function () {
    $(this).css("background-color", "white");
    $(".t1_t_x0").css("background-color", "white");
}
);

    // 1 
    $(".t1_h_x1").hover(
function () {
    $(this).css("background-color", "yellow");
    $(".t1_t_x1").css("background-color", "yellow");
}, function () {
    $(this).css("background-color", "white");
    $(".t1_t_x1").css("background-color", "white");
}
);
// and keep adding code here if there are more tables 
}

这也会导致大量的html代码，例如第一个表：

现在我正在重新设计网站，想知道有没有更有效的方法来实现这一目标？

如果你想看看，请链接到我的site

【问题讨论】：

标签： javascript text hover highlight

【解决方案1】：

您可以通过为所有要悬停的单元格提供相同的类名来简化代码，然后使用单元格文本构建查询以解决正确的跨度，如下所示：

$(".hovercell").hover(
    function () {
        $(this).css("background-color", "yellow");
        $(".t1_t_x"+$(this).text()).css("background-color", "yellow");
    }, function () {
        $(this).css("background-color", "white");
        $(".t1_t_x"+$(this).text()).css("background-color", "white");
    }
);

jsfiddle：http://jsfiddle.net/markai/o3arj251/

【讨论】：