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

如果我正确理解你，那么你与rgba背景非常接近（除了你的目标是行而不是单元格）。这是你正在寻找的吗？

＆＃13;

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

＆＃13;

.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 td:not(.prVerticalSpace) {
    background: rgba(204, 204, 204, 0.5) !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 2

不需要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>

Answer 3

https://jsfiddle.net/v9jphr5h/

的答案

tr:nth-child(2n) 
{
  background-color:#ffe;
}

tr:nth-child(n+2):hover>td,
tr:nth-child(n+2):hover>td.prTableCell[title]{
    background: rgba(204, 204, 204, 0.5)
}

底线： - 你的rgba方法有效 - 绝对不需要jquery - （除非你想与最老的浏览器兼容，但在这种情况下，你不能使用rgba eithter。在这种情况下，找出每个单元格的颜色并添加＆＃34; odd＆＃34;和＆＃34;甚至＆＃34;行的类。）

在悬停时更改表行背景颜色

3 个答案: