将鼠标悬停在第二列上时更改表格中第一列的 CSS 样式答案

【问题标题】：Changing CSS Style for First Column in Table when Hovering over Second Column将鼠标悬停在第二列上时更改表格中第一列的 CSS 样式
【发布时间】：2017-05-21 02:10:47
【问题描述】：

我已经尝试了很多方法来完成这项工作。

这是表格和 CSS 代码：

https://codepen.io/anon/pen/JNereG

您可以看到，如果您将鼠标悬停在第一列，则虚线边框消失了。转到第二列，它仍然存在。

学到了一些here讲的东西#a:hover + #b#a:hover ~ #b#a:hover #b

一般来说，对于所有 TD 行和列，我使用 table.spectable td 来定位这些元素，因此 table.spectable tr:hover td 在悬停这些元素时效果很好。

问题就在这里：

table.spectable td:nth-child(1) {
        border-right: 1px dotted #C1C3D1;
}

在第一列发生的列之间的虚线。

很容易编写一个 CSS 以在第一列中悬停时将其删除：

table.spectable td:hover:nth-child(1) {
        border-right: none;
}

但如果我悬停在第二列.. 我也希望发生同样的事情。

我尝试了什么？东西太多，一言难尽。

如上所述，

table.spectable td.nth-child(1):hover ~ table.spectable td.nth-child(2) {
    border-right: none;
}

是不行的。与 + 的变体相同，并且省略了介于两者之间的任何内容。没有运气。我尝试了一堆其他随机的东西，其中一些仍在 CodePen 中。

即使是 jQuery 解决方案，我也无法开始工作。一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("table.spectable td.nth-child(2)").hover(function(){
  $("table.spectable td.nth-child(1)").css('border-right','none')
})
</script>

我敢肯定这可能真的很简单.. 但是当我将鼠标悬停在第二列时，我究竟如何摆脱第一列的边框？

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

看看这个https://codepen.io/inijr/pen/EmOEjP?editors=1111

for($i = 1; $i < $('.td-cell').length; $i+=2){
     $($('.td-cell')[$i]).hover( 
 function(){
    $('.td-cell').css('border-right','none');
 },
 function(){
    $('.td-cell').css('border-right','1px dotted #C1C3D1');
 });
}
for($i = 1; $i < $('.td-cell-alt').length; $i+=2){
 $($('.td-cell-alt')[$i]).hover(
 function(){
   $('.td-cell-alt').css('border-right','none');
 },
 function(){
   $('.td-cell-alt').css('border-right','1px dotted #C1C3D1');
 });
}

【讨论】：

【解决方案2】：

CSS 选择器已存在于您的代码中。
添加border-right: none;到以下标签：

table.spectable tr:hover td {
  background:#7F8C9A;
  color:#000000;
  border-top: 2px solid #22262e;
  border-bottom: 2px solid #22262e;
  border-right: none;
}

table.spectable tr:nth-child(odd):hover td {
    background: #34495E;
    color: #fff;
    border-right: none;
}

【讨论】：