Here is some HTML:
<table class="table table-striped table-bordered table-condensed table-hover">
....
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<tr><td>{{car.name}}</td><td>{{car.review}}</td><td>{{car.rating}}</td><td>{{car.recommended}}</td></tr>
<tr><td>{{car.name}}</td><td>{{car.review}}</td><td>{{car.rating}}</td><td>{{car.recommended}}</td></tr>
<tr><td>{{car.name}}</td><td>{{car.review}}</td><td>{{car.rating}}</td><td>{{car.recommended}}</td></tr>
</table>
</td>
</tr>
</tbody>
This particular row is hidden until clicked on, revealing an embedded table.
However, when the hidden table is displayed and hovered over, it changes its background color. This behavior is unwanted. I attempted to resolve this by adding the following CSS code:
.hidden-table:hover {
background-color: none !important;
}
Unfortunately, this did not work as expected. Is there a correct method to remove the 'table-hover' effect from specific rows in a table?