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

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 sn-p:

<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 sn-p:

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();