jquery - 悬停时更改表格行背景颜色

Question

我想在悬停在表格行上时实现某种半透明颜色覆盖，我创建了一个小 DEMO在这里。

但是我不想以任何方式改变文本，所以只是背景，我希望它是一种覆盖的原因是我只希望单元格稍微暗一些而不是相同的悬停时的颜色。有道理吗？

代码:

<table id="compTable" class="prTable">
    <tr class="prTableHeader">
        <th></th>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr class="prTableRow">
        <td class="prExerVariNameTD blackColor">Squat</td>
        <td class="prVerticalSpace"></td>
        <td class="prTableCell" title="@finalDate">100</td>
        <td class="prTableCell" title="@finalDate">100</td>
        <td class="prTableCell" title="@finalDate">100</td>
    </tr>
</table>

CSS

.prTableCell {
    padding: 7px;
    width: 60px;
    text-align:center;
    border:1px solid #e1e1e1;
    cursor:default;
}

.prExerVariNameTD {
    width: 200px;
    border:1px solid #e1e1e1!important;
    padding: 5px 5px 5px 10px;
    background-color: white;
}

.prVerticalSpace {
    width: 50px;
}

.rowHover {
    /*background: rgba(204, 204, 204, 0.5);*/
    opacity: 0.5;
}

脚本:

$(document).ready(function () {
    $("table#compTable .prTableCell:even").css("background-color", "#eeeeee");
    $("table#compTable .prTableCell:odd").css("background-color", "White");

    $(".prTableRow").hover(function () {
        $(this).toggleClass("rowHover");
    });
});

Answer 1

不需要 JavaScript。 CSS 来拯救!

这会在悬停时将背景颜色设置得稍微暗一些。您可以使用实际颜色值来使鼠标悬停时颜色变深或变亮。

.prTableCell {
  padding: 7px;
  width: 60px;
  text-align: center;
  border: 1px solid #e1e1e1;
  cursor: default;
}

.prExerVariNameTD {
  width: 200px;
  border: 1px solid #e1e1e1!important;
  padding: 5px 5px 5px 10px;
  background-color: white;
}

.prVerticalSpace {
  width: 50px;
}

.prTableCell:nth-child(even) {
  background-color: #eee;
}

.prTableCell:nth-child(odd) {
  background-color: #fff;
}

.prTableRow:hover .prTableCell:nth-child(even) {
  background-color: #ddd;
}

.prTableRow:hover .prTableCell:nth-child(odd) {
  background-color: #eee;
}

<table id="compTable" class="prTable">
  <tr class="prTableHeader">
    <th></th>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr class="prTableRow">
    <td class="prExerVariNameTD blackColor">Squat</td>
    <td class="prVerticalSpace"></td>
    <td class="prTableCell" title="@finalDate">100</td>
    <td class="prTableCell" title="@finalDate">100</td>
    <td class="prTableCell" title="@finalDate">100</td>
  </tr>
</table>