2列目にカーソルを置いたときにテーブルの最初の列のCSSスタイルを変更する

Question

この作業を行うために多くのことを試しました。

はここで、テーブルやCSSコードです：あなたが最初の列に置く場合は、

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

は、あなたが見ることができ、点線の境界線がなくなっています。 2番目の列に移動し、それが残ります。

は私がtable.spectable tr:hover tdは、これらの要素のためのホバーに素晴らしい仕事を、すべてのTDの行と列のためのtable.spectable tdなどで、これらの要素をターゲットにしています。一般について#a:hover + #b#a:hover ~ #b#a:hover #b

を話したいくつかのものhereを学びました。

問題はここです：

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

最初の列に起こっている列の間の点線。

簡単に最初の列内のホバーでこれを削除するためにCSSを書くために：

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

しかし、私は2番目の列にホバリングしていた場合..私にも発生することと同じことをしたいです。

私は何を試しましたか？あまりにも多くのことを記載すると、恥ずかしいことに言います。

前述したように、

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

には、外出先ではなかったです。これの変形である+と同じで、間に何も省略しているものと同じです。運がない。私は他のランダムなものを試しましたが、そのうちのいくつかはまだCodePenに残っています。

jQueryのソリューションでさえ、私は働くことができません。 1の例：

<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セレクタがコード内に既に存在しています。
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; 
} 

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

これをチェックしてください