0

I've tried so many things to get this work.

Here's the table and CSS code:

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

You can see, if you hover in the first column, the dotted border is gone. Go over to the second column, it remains.

Learned some things here which talked about #a:hover + #b #a:hover ~ #b #a:hover #b

Generally speaking I'm targeting these elements with like table.spectable td for all the TD Rows and Columns, so table.spectable tr:hover td worked great on hover for these elements.

The issue is right here:

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

A dotted line between the columns which is happening on the first column.

Easy to write up a CSS to remove this on hover within the first column : 

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

But if I'm hovering in the second column.. I also want the same thing to occur.

What have I tried? Too many things to list, embarrassingly to say.

As mentioned above, 

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

was a no go. Same with the + variant of that, and the one omitting anything in between. No luck. I've tried a bunch of other random things, some of them are still in the CodePen.

Even jQuery solutions I can't get to work. Example of one:

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

I'm sure this is probably really simple.. but how in the world do I get rid of the border in the first column when hovering over the second?

Community
  • 1
  • 1
Brian Bruman
  • 883
  • 12
  • 28

2 Answers2

1

Check this out 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');
 });
}
Iniobong Dickson Junior
  • 23
  • 5
0

The CSS selector already exists in your code.
Add border-right: none; to the following tags:

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;
}
Thisismint
  • 188
  • 1
  • 6