在悬停时突出显示并在单击时更改颜色的表格行答案

【问题标题】：Table row that highlights on hover and changes color on click在悬停时突出显示并在单击时更改颜色的表格行
【发布时间】：2015-07-21 22:53:43
【问题描述】：

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

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

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

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

【问题讨论】：

提供html代码或小提琴

标签： jquery html css

【解决方案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>

【讨论】：

对于额外的 WOW，使用 CSS 过渡属性
这不起作用。当我点击一行时，什么也没有发生。
因为有一个错字...它在 tr 周围缺少"
谢谢！现在工作。我知道我在原始帖子中没有问过，但是是否有可能让它在任何时候都只能“点击”一行？
是的，只需从其兄弟姐妹中删除选定的类。见编辑。

【解决方案2】：

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

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

你的 css 可以。

td
{
    width:40px;

}

sel
{
background-color:#ffd659

}

JS 小提琴：http://jsfiddle.net/szup0x8k/9/

【讨论】：