將鼠標懸停在表格單元格分隔符HTML / CSS / JS上時的懸停效果

Question

我有當前的下表：

 <table border="1"> <tr> <td></td> <td>Banana</td> <td>Orange</td> <td>Plum</td> </tr> <tr> <td>Banana</td> <td>1:1</td> <td>1:2</td> <td>1:3</td> </tr> <tr> <td>Orange</td> <td>2:1</td> <td>1:1</td> <td>1,5:1</td> </tr> <tr> <td>Plum</td> <td>1:3</td> <td>2:1</td> <td>1:1</td> </tr> 

當我將鼠標懸停在細胞分隔板上時，我希望引起觸發，如下面所示。 這需要在HTML / CSS / jss中完成。 我可以很容易地找出表格或單個單元格的懸停，但是當懸停在單元格分隔符上時如何獲得觸發的東西？ （見下圖）

Answer 1

tr td{
  position:relative;
}
tr td::after{
  position:absolute;
  right:-2px; 
  width:4px;
  cursor:pointer;
  top:0px;
  height:100%;
  z-index:1;
}
tr td::nth-last-of-type::after{
  display:none;
}

現在，您可以通過選擇“ tr td :: after”作為選擇器來觸發任何操作

同樣，可以根據單元格的邊框/填充來更改寬度和右側。