從表格的某些行中刪除表格懸停效果？

Question

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

這是一個隱藏的行，其中包含html表，當您單擊表的某一行時會顯示該行。

但是，當我的隱藏表顯示在一行中並且您將鼠標指向它時，它會更改背景色，但是我不需要這樣做。 我已經嘗試通過以下CSS解決此問題：

 .hidden-table:hover {
     background-color: none !important;
 }

但這沒有用。 那么，從表的某些行中刪除表懸停效果的正確方法是什么？

Answer 1

background-color: none; 不存在...應該透明。 但這對您不起作用，因為您將擁有TR的顏色。

因此，您將必須設置一種顏色，例如：

.hidden-table:hover {
     background-color: white !important;
 }

編輯：

由於您的表還具有bootstrap類table-hover和其他類，因此您將必須覆蓋以下屬性：

.table-hover > tbody > tr:hover > td

所以像：

.table-hover > tbody > tr.hidden-table:hover > td {
     background-color: white;
 }

Answer 2

這對我來說完美適用於Chrome

table tr:hover td { 
   background-color: inherit;     
   opacity: 1.0;
}