刪除鼠標懸停效果

Question

當鼠標懸停在細胞上時，假設發生了效果X. 如何刪除懸停效果？

JS小提琴

HTML代碼：

<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Key</th>
        <th>Valeur version {{application.version}}</th>
        <th></th>
        <th>Valeur version {{applicationcible.version}}</th>
    </tr>
    </thead>

    <tbody ng-repeat="group in groups">
    <tr>
        <td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
                <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                <strong>{{group.name}}</strong>
            </a>
        </td>
    </tr>
    <tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
        <td rowspan="2">
                {{ member.name }}
        </td>
        <td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
        <td class="cube" >
            <div  ng-if="group.id != 1">
                <button type="button"  ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
             </div>
        </td>
        <td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
    </tr>
    <tr ng-repeat-end ng-hide="hideGroup" >
        <td class="cube" >
            <div ng-if="group.id != 2">
                <button type="button"  ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
             </div>
        </td>
    </tr>
    </tbody>
</table>

更新

我試過這個CSS：

tbody tr:hover td.hasRowSpan { 
          background-color: none;   /* or whatever color you want */
} 

不幸的是，它不起作用。

Answer 1

Remove the class "table-hover" from the table tag.

http://jsfiddle.net/ozr598jb/6/

Answer 2

您可以使用Bootstrap懸停規則並使用inherit取消背景顏色（默認值為none ）：

.table-hover>tbody>tr:hover>td, 
.table-hover>tbody>tr:hover>th {
    background-color: inherit;
}

當然，設置其他懸停樣式，其他顏色或邊框等更有意義。否則，首先不要在表格上使用table-hover類。

演示： http ： //jsfiddle.net/ozr598jb/3/