jquery - 表格行在悬停时突出显示并在单击时更改颜色

Question

我正在尝试使用 jquery 来处理这两种情况。基本上，我想要的功能是当您将鼠标悬停在表格行上时突出显示表格行，但是当您单击该特定行的某一行时，表格行会变成比悬停突出显示更深的颜色。这是我目前拥有的代码

$("tr").not(':first').hover(
  function() {
    $(this).css("background", "#FFEFC6");
  },
  function() {
    $(this).css("background", "");
  }
);

$("tr").click(function(e) {
  $(this).css("background-color", "#ffd659");
});

我遇到的问题是，当我单击一行时，它会变成较暗的颜色，但如果我将鼠标悬停在远离该行的位置，它将恢复为透明背景。

Answer 1

使用 CSS，无需使用 JavaScript 进行悬停 因此只需单击即可切换类

$("tbody").on("click", "tr", function(e) {     
  $(this)
     .toggleClass("selected")
     .siblings(".selected")
         .removeClass("selected");
});

table { width: 50% }
tbody tr:hover.selected td,
tbody tr:hover td {
  background-color: #FFEFC6;
  cursor: pointer;
}
tbody tr.selected td {
  background-color: #ffd659;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>