CODEWITHSUNDEEP
jqueryhtmlcssrazortwitter-bootstrap-3
user1404577
user1404577

Reputation:

Hover effect on tables inside wells

I have the following inside my asp.net mvc view, where it contains a WebGrid and a div:

<div class="well">
var grid = new WebGrid(
            tableStyle: "table table-bordered table-hover",

But currently there is not an hover effect inside the grid. If I remove the class="well" I can see the hover effect. It seems that the hover colour is the same as the well class colour.

Demo

Upvotes: 2

Views: 310

Answers (1)

isherwood
isherwood

Reputation: 61114

The problem is not with your code. It's with the fact that Bootstrap applies the same color to hovered table cells as it uses for well backgrounds.

Reverse the effect with this CSS:

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

Demo

Upvotes: 3

Related Questions