悬停改变表格行背景颜色

我想实现某种半透明颜色覆盖悬停在表格行上，我在这里创建了一个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"); 
    }); 
});

来源

2017-04-20 Pontus Svedberg

只需使用CSS：'.prTableRow：nth-child（偶数）：hover {background-color：#eee; } .prTableRow：nth-child（odd）：hover {background-color：#fff; }' –

您的标题和您的代码在这里有点不同。你说你想改变悬停的行背景颜色，但是你的代码已经设置了表格单元格的背景颜色。 –

当我第一次尝试它时，只改变了我徘徊的单元格，然后它全部变成了一团糟：/ @MikeMcCaughan –

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

来源

2017-04-20 22:00:20

请注意，您可以通过将'：hover'从表格行移动到单元格来使其仅指向当前单元格。 –

这太棒了！万分感谢！ –

如果我正确认识你，你是非常接近你的rgba背景（除非你瞄准行而不是细胞）。这是你在找什么？

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

.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; 
 
}

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

来源

2017-04-20 21:50:41 APAD1

很酷，是否有可能在这里包含偶数/奇数，以便所有这些都不会结束相同的颜色？而只是比原来暗一点点，以便他们仍然看起来与众不同？ –

annswer在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。在这种情况下，找出每个单元格的颜色并添加“odd”和“even “类到行。）

来源

2017-04-20 22:04:36 realbart

悬停改变表格行背景颜色

回答

相关问题