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的旧颜色，以便在mouseout事件中重置它，但没有成功。我怎样才能做到这一点？

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

Answer 1

@ user1238784，在这里你忘了给你的div元素的ID尝试使用给定的解决方案

＆＃13;

$(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);
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用简单的CSS实现此目的：

＆＃13;

  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;

＆＃13;

<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>

＆＃13;

Answer 3

好的，我决定选择css：

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

    .rowstriped:hover {
        background-color: gold;
    }

javascript：恢复div的背景颜色

3 个答案: