使用JQuery实现的TR元素悬停效果无法恢复默认背景色

我来帮你搞定这个悬停后没法恢复原始背景色的问题～你的问题主要出在两个地方：

• 内联样式的优先级比CSS类高太多，所以你之前尝试的CSS hover类根本盖不过内联的background属性；
• 移出时的jQuery代码里写的'.$status_color.'是后端PHP的变量，前端JS根本读不到这个值，自然没法恢复正确的颜色。

下面给你两种实用的解决方案，选哪种都能解决问题：

方案一：用jQuery存储原始背景色 #

先在页面加载完成后，把每个的原始背景色存到它的data属性里，之后hover移出时直接取这个值恢复就行：

$(document).ready(function() {
  // 先保存每个可点击行的原始背景色
  $('#waypointsTable tr.clickable-row').each(function() {
    $(this).data('original-bg', $(this).css('background-color'));
  });

  // 绑定hover事件
  $('#waypointsTable tr.clickable-row').hover(
    function() {
      // 鼠标移入时设为黄色
      $(this).css('background-color', 'yellow');
    },
    function() {
      // 鼠标移出时从data里取原始颜色恢复
      $(this).css('background-color', $(this).data('original-bg'));
    }
  );
});

这里建议用css('background-color')而不是直接覆盖整个style属性，避免不小心清除掉其他可能的内联样式，更安全。

方案二：用CSS变量实现（更推荐，少写JS） #

这种方法不用写太多JS，直接靠CSS就能搞定，还能解决内联样式优先级的问题：

首先修改PHP输出的代码，把背景色赋值给一个CSS变量，而不是直接写background：

echo'<tr class="clickable-row" style="--original-bg: '.$status_color.';" data-href="index.php?id='.$requests[$i]['Request_id'].'">';

然后在你的CSS里加上这两行：

.clickable-row {
  background-color: var(--original-bg) !important;
}
.clickable-row:hover {
  background-color: yellow !important;
}

这里的!important是为了让CSS变量的样式优先级和内联样式持平，这样hover时的黄色就能顺利覆盖原始背景色，鼠标移开后自动恢复。你之前用CSS类没生效，就是因为内联样式优先级太高，现在用这个方法就能完美解决啦。

内容的提问来源于stack exchange，提问作者Luis Luis Maia Maia