I have here an example where you can click on a row and it inserts a new row right underneath. The new row consists of a new table.See fiddleAs you can see from the fiddle above, there is a hover over CSS in place for each table separately. The problem is now that the hover over from the parent table covers the second table.
I rather would like to override the hover over effect from the parent table when hovering over the new row, so that I can see the hover effect of the sub table instead:
I tried to prevent parent's table CSS to be applied on the new row like this:\[code\]table.cb_table-hover tbody tr:hover td:not(.override),table.cb_table-hover tbody tr:hover th:not(.override){ background-color: #cfe2e8; }\[/code\]As you can see in this new fiddle: However the results are not as I expected. What could I be missing?Thanks