jquery - 将当前 CSS 值保持在变量中而不更改

Question

我试图将元素的当前 CSS 值保存在变量中。我的问题是每当我更改原始元素的样式时，我之前分配的变量中的值也会更改。

var currentColor;

$("tr").hover(function () {
    currentColor = $(this).css("background-color");
    $(this).css("background-color", "#f7f7f7")
}).mouseout(function () {
    $(this).css("background-color", currentColor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr style="background-color:#FF0000"><td>Foo</td></tr>
    <tr style="background-color:#00FF00"><td>Foo</td></tr>
    <tr style="background-color:#0000FF"><td>Foo</td></tr>
</table>

我也尝试使用 .data()但这并没有解决我的问题。

var currentColor;

$("tr").hover(function () {
    $("div").data("currentColor", $(this).css("background-color"));
    $(this).css("background-color", "#f7f7f7")
}).mouseout(function () {
    $(this).css("background-color", $("div").data("currentColor"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr style="background-color:#FF0000"><td>Foo</td></tr>
    <tr style="background-color:#00FF00"><td>Foo</td></tr>
    <tr style="background-color:#0000FF"><td>Foo</td></tr>
</table>

更新

既然社区问我为什么我没有使用 tr:hover {background:color} 我必须将它包含在我的实际元素中，在那种特殊情况下我遇到了这样的情况我不得不使用 jQuery 修改背景颜色。之后 tr:hover {background:color} 不起作用，您还必须使用 jQuery 管理 tr:hover 功能。

我从我的问题中排除了那部分，因为我认为没有必要解释它。

Answer 1

使用这段代码:

$("tr").mouseenter(function() {
  $(this).attr("currentColor", $(this).css("background-color"));
  $(this).css("background-color", "#f7f7f7")
}).mouseout(function() {
  $(this).css("background-color", $(this).attr("currentColor"));
});

我不知道你为什么要使用 $("div")，因为你的 HTML 中没有 div。

其次，使用mouseenter 而不是hover

jQuery 演示

$("tr").mouseenter(function() {
  $(this).attr("currentColor", $(this).css("background-color")).css("background-color", "#f7f7f7")
}).mouseout(function() {
  $(this).css("background-color", $(this).attr("currentColor"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="background-color:#FF0000">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#00FF00">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#0000FF">
    <td>Foo</td>
  </tr>
</table>

Css 方式演示

table tbody tr:hover td {
  background-color: #f7f7f7;
}

<table>
  <tr style="background-color:#FF0000">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#00FF00">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#0000FF">
    <td>Foo</td>
  </tr>
</table>