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

Question

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

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

我希望能够突出显示一行（例如Centro Moctezuma），并且仅 会突出显示第一栏中的公司名称。因此，突出显示第2行时，应突出显示名称Centro Moctezuma，而不突出显示名称Alfreds Futterkiste.

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

以下是显示该问题的小提琴：https://jsfiddle.net/hdo236vm/

---

HTML片段：

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="row">
    <td class="name">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr class="row">
    <td class="name">Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="row">
    <td class="name">Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr class="row">
    <td class="name">Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr class="row">
    <td class="name">Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr class="row">
    <td class="name">Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

JS代码段：

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

nameHighlight();

CSS：

.name__highlight {
  color: red;
}

Answer 1

您可以使用纯CSS做到这一点：

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

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

Answer 2

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

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

nameHighlight();