JavaScript:恢复 div 的背景颜色

Question

在我的js代码中，我有：

$(document).ready(function () {
$(".row.rowstriped:even").css("background-color", "lightGray");
});
var oldBackColor;
function DoRowGold(el) {
var id = el.id;
sId = "#" + id;
oldBackColor = $(sId).css('background-color'); 
$(sId).css('background-color', '#FFD700');
}
function DoRowNormal(el) {
var id = el.id;
sId = "#" + id;
$(sId).css('background-color', oldBackColor);
}

在我的 HTML 中：

<div id="someid" class="row rowstriped" onmouseover="DoRowGold(this)" onmouseout="DoRowNormal(this)">

在我的 css 中，我定义了一个空的行条纹样式。通过这种方式，我确信 jquery 代码只影响具有此附加类的行。

.css：

.rowstriped{}

现在我希望当文档加载时，行变为交替颜色，但是当用户将鼠标移到行上时，其背景色变为黄金色。然后，当它用鼠标离开行时，背景颜色应返回与 jquery 函数完成的条带化相同的颜色。 在更改div之前，我尝试存储div的旧颜色，以便在mouseout事件中重置它，但没有成功。 我怎样才能做到这一点？

**编辑我忘了在我的代码示例中给出 id，但在我的真实代码中有一个 id(由 Razor 自动生成(

Answer 1

@user1238784，在这里您忘记提供div元素的ID，尝试使用给定的解决方案

$(document).ready(function () {
$(".row.rowstriped:even").css("background-color", "lightGray");
});
var oldBackColor;
function DoRowGold(el) {

var id = $(el).attr("id");
sId = "#" + id;
oldBackColor = $(sId).css('background-color'); 
console.log(oldBackColor);
$(sId).css('background-color', '#FFD700');
}
function DoRowNormal(el) {
var id = el.id;
sId = "#" + id;
$(sId).css('background-color', oldBackColor);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row rowstriped" Id="divColChange" style="border: 1px solid red; height:50px; width:50px" onmouseover="DoRowGold(this)" onmouseout="DoRowNormal(this)"></div>

Answer 2

您可以使用简单的CSS来实现此目的，如下所示：

table {
border-collapse: collapse;
}
td {
padding: 10px 20px;
border: 1px solid #ddd;
}
.rowstriped tr:nth-child(odd) {
background-color: #ddd;
}
.rowstriped tr:hover {
background-color: gold;

<table class="rowstriped">
<tbody>
<tr>
<td>
John
</td>
<td>
Smith
</td>
</tr>
<tr>
<td>
Peter
</td>
<td>
Lucas
</td>
</tr>
<tr>
<td>
Ammy
</td>
<td>
Joseph
</td>
</tr>
<tr>
<td>
Molly
</td>
<td>
Hooper
</td>
</tr>
<tr>
<td>
James
</td>
<td>
Luke
</td>
</tr>
</tbody>
</table>

Answer 3

好的，我决定使用 css：

.rowstriped:nth-child(odd) {
background-color: #ddd;
}
.rowstriped:hover {
background-color: gold;
}