Question

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

这是表和CSS代码：

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

了解了一些#a:hover + #b #a:hover ~ #b #a:hover #b table.spectable td

的内容here

一般来说，我将这些元素与所有道明行和列的table.spectable tr:hover td类似，因此table.spectable td:nth-child(1) { border-right: 1px dotted #C1C3D1; }在悬停这些元素时效果很好。

问题就在这里：

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

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

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

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

但如果我在第二栏徘徊......我也想要发生同样的事情。

我尝试了什么？要列出太多的东西，令人尴尬地说。

如上所述，

是不行的。与<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>变体相同，省略之间的任何内容。没运气。我尝试过其他一些随机的东西，其中一些还在CodePen中。

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

{{1}}

我确信这可能非常简单..但是当我在第二列悬停时，我是如何在第一列中摆脱边界的呢？

Answer 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');
 });
}

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

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

2 个答案: