CSS -选择当前行的第2-6列？
CSS -选择当前行的第2-6列？
提问于 2016-12-20 11:26:34
我想要一个悬停效果，所以当用户悬停在一行的1到7之间的任何列上时，这些样式将适用于行中的所有列，除了列1和列7(因此当前行的背景颜色变化为2-6列，而不是列1和7)：
tbody tr:hover > td:not(:first-child):not(:last-child) {
cursor: pointer; background-color: rgb(221, 221, 221);
}然而，我在第1栏和第7栏上也有类似的悬停风格。因此，为了澄清，我希望的行为是：
- 用户悬停在第x行，第1列--该单元格获得悬停效果。
- 用户悬停在第x行，第7列--该单元格获得悬停效果。
- 用户悬停在第x行，任何列从2-6，所有单元格在第x行，列2-6得到悬停效果。
回答 2
Stack Overflow用户
发布于 2016-12-20 11:31:14
简单的解决方案如“皮特”评论: css：
tbody tr:not(:first-child):not(:last-child){
cursor: pointer;
background-color: rgb(221, 221, 221);
}论每一行的td自动机
tbody tr td:not(:first-child):not(:last-child){
cursor: pointer;
background-color: rgb(221, 221, 221);
}因此，我们需要使用一些jQuery来归档，对于从2到6的单元格，使用一些类的tds，而常规的css用于第一个和最后一个子节点。
$("table.mytable").find('td.a')
.on( "mouseenter", function() {
var allaclass = $(this).parent().find('td.a');
allaclass.css("background-color", "red");
})
.on( "mouseleave", function() {
var allaclass = $(this).parent().find('td.a');
allaclass.css("background-color", "white");
});tbody tr td:first-child:hover,
tbody tr td:last-child:hover{
cursor: pointer;
background-color: rgb(221, 221, 221);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="mytable">
<tbody>
<tr>
<td>1</td>
<td class="a">2</td>
<td class="a">3</td>
<td class="a">4</td>
<td class="a">5</td>
<td class="a">6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td class="a">2</td>
<td class="a">3</td>
<td class="a">4</td>
<td class="a">5</td>
<td class="a">6</td>
<td>7</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2016-12-20 11:31:22
将悬停应用于父。
tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
cursor: pointer;
background-color: rgb(221, 221, 221);
}
tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
cursor: pointer;
background-color: rgb(221, 221, 221);
}<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41241267
复制相关文章
相似问题
腾讯云开发者
