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

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 代码。