CODEWITHSUNDEEP
javascripthtmlangularjs
Mercer
Mercer

Reputation: 9986

Remove mouse hover effect

When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?

JS Fiddle

HTML code:

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

Update

I tried this CSS:

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

It doesn't work, unfortunately.

Upvotes: 1

Views: 888

Answers (2)

talhatahir
talhatahir

Reputation: 85

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

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

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):

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

Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.

Demo: http://jsfiddle.net/ozr598jb/3/

Upvotes: 1

Related Questions