두 번째 열 위로 가져갈 때 테이블의 첫 번째 열에 대한 CSS 스타일 변경

Question

이 작업을 수행하기 위해 많은 노력을 기울였습니다.

가 여기에 테이블과 CSS 코드 : 당신이 첫 번째 열에 올려 놓으면,

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

당신이 볼 수있는, 점선 테두리가 사라 졌어요. 두 번째 열로 이동하면 그대로 유지됩니다.

에 대한 #a:hover + #b #a:hover ~ #b #a:hover #b

일반적으로 나는 모든 TD 행과 열을위한 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; 
} 

위에서 언급 한 바와 같이

는 어떤 이동했다. 그것의 + 변종과 동일하고 그 사이에 어떤 것도 생략하고있는 것. 불운. 나는 다른 임의의 것들을 시도했는데, 그 중 일부는 여전히 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> 

나는이 아마 정말 간단 확신 해요 ..하지만 두 번째 유혹 할 때 어떻게 세상에서 내가 첫 번째 열에 경계 제거합니까?

Answer 1

CSS 선택기가 이미 코드에 있습니다.
국경 - 오른쪽 추가 : 없음; 다음 태그 :

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

Answer 2

확인이 밖으로 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'); 
}); 
} 

을