将鼠标悬停在表格单元格分隔符HTML / CSS / JS上时的悬停效果

Question

I have the current following table:

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

I am looking to cause a trigger when I am mousing over the cell dividers , AS indicated bellow. This needs to be done in either HTML/CSS/jss. I can easily figure out a hover for the table or for the individual cells, but how could I get something to trigger when hovering over the cell dividers? (see following image)

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

Now you can trigger anything by selecting 'tr td::after' as a selector

Also, width and right can be changed according to your border/padding of the cells.