时间戳

首页 > 解决方案 > 突出显示悬停行的特定表格单元格

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

问题描述

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

| 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;
}

标签： javascriptjqueryfunctionclassevents

解决方案

你可以像这样使用纯 CSS 来做到这一点：

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

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

推荐阅读