Javascript 突出显示悬停行的特定表格单元格

我有一张桌子，看起来像这样：

| Company              | Contact         | Country  |
|---|---|---|
| Alfreds Futterkiste  | Maria Anders    | Germany  | 
| Centro Moctezuma     | Francisco Chang | Mexico   |

我希望能够突出显示一行（例如，

Centro Moctezuma

），并且只突出显示第一列中的公司名称。因此，在突出显示第2行时，应突出显示名称

Centro Moctezuma

，而不是名称

Alfreds Futterkiste.

我有一些代码，当鼠标悬停在任何一行上时，会突出显示第一列中的所有名称，这不是我想要的。如何重新格式化代码，以便只突出显示悬停行的公司名称

这里有一把小提琴显示了这个问题：

---

HTML代码段： CSS:

---

您可以使用纯CSS执行此操作，如下所示：

| Company              | Contact         | Country  |
|---|---|---|
| Alfreds Futterkiste  | Maria Anders    | Germany  | 
| Centro Moctezuma     | Francisco Chang | Mexico   |

tr.row:hover.name{
颜色：红色；
}

---

注意：在应用此CSS之前，不要忘记删除JS代码。

您的代码会将.name\uu highlight类添加到具有.name类的所有元素中。您需要搜索悬停在上面的元素，并在其中找到.name元素。像这样：

function nameHighlight() {
    $(".row").mouseover(function () {
        $(this).find(".name").addClass("name__highlight")
    })
    $(".row").mouseleave(function () {
        $(this).find(".name").removeClass("name__highlight")
    })
}

nameHighlight();

---

为什么不直接使用

：hover

？嘿@sandrooco，我想将鼠标悬停在行中的任何位置，并突出显示公司名称。如果我使用

name:hover

，那么我只能将鼠标移到名称上。使用纯CSS可以这样做：

tr.row:hover.name{color:red；}

。但别忘了删除JS代码。@Konrud哇，这比我想象的要简单得多。如果你回答了，我会接受的。@Bodrov，刚刚回答了。你应该更喜欢纯CSS解决方案而不是JS。请参阅@Konrud的答案。没错，但此解决方案将其推广到纯CSS无法完成的操作，并解释了原始代码无法工作的具体原因。我同意另一个答案应该是首选的解决方案，但我的答案也增加了价值。作为评论，是的，但不是解决方案。不是根据。

.name__highlight {
  color: red;
}

function nameHighlight() {
    $(".row").mouseover(function () {
        $(this).find(".name").addClass("name__highlight")
    })
    $(".row").mouseleave(function () {
        $(this).find(".name").removeClass("name__highlight")
    })
}

nameHighlight();