删除鼠标悬停效果

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/