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

Question

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

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

我希望能够突出显示一行（例如Centro Moctezuma ）并且只突出显示第一列中的公司名称。 因此，在突出显示第 2 行时，应突出显示Centro Moctezuma的名称，而不是Alfreds Futterkiste.的名称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();