Question

目前我有一个包含多行数据的表。行以背景颜色在蓝色和白色之间交替。每当我鼠标悬停时，我都希望背景颜色暂时变为红色并恢复为蓝色或白色的原始颜色。

 $(document).ready(function () {
    var currColor = "";

    $("tr.HierarGridItem").hover(function () {
        currColor = $("tr.HierarGridItem").css("background-color");
        $(this).css("background-color", "red");
    }, function () {
        $(this).css("background-color", currColor);

    });

});

上面的代码工作正常，当我将鼠标悬停在一行上时，将背景颜色设置为红色。但是当我鼠标移出时，它总是将背景颜色设置为蓝色而不是蓝色或白色，具体取决于原始值。

由于

Answer 1

有时JavaScript有点矫枉过正，事情可以更轻松。

你的交替背景可能有一个CSS类。

.odd {
  background-color: white;
}

.even {
  background-color: blue;
}

您需要做的就是在您的tr中添加：hover伪类。

tr:hover {
  background-color: red;
}

＆＃13;

.odd {
  background-color: blue;
}
.even {
  background-color: white;
}
tr:hover {
  background-color: red;
}

＆＃13;

<table>
  <tr class="odd">
    <td>foo</td>
    <td>foo</td>
  </tr>
  <tr class="even">
    <td>bar</td>
    <td>bar</td>
  </tr>
  <tr class="odd">
    <td>baz</td>
    <td>baz</td>
  </tr>
  <tr class="even">
    <td>qux</td>
    <td>qux</td>
  </tr>
</table>

＆＃13;

Answer 2

将currColor设置为thr当前项目。等;

$("tr.HierarGridItem").hover(function () {
    currColor = $(this).css("background-color");
    $(this).css("background-color", "red");
}, function () {
    $(this).css("background-color", currColor);

});

但建议使用css，使用：hover pseudo class。

如何设置具有交替背景颜色的表的鼠标悬停/鼠标悬停背景颜色

2 个答案: