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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.