悬停对井内表格的影响

Hover effect on tables inside wells

我的 asp.net mvc 视图中有以下内容,其中包含一个 WebGrid 和一个 div:

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

但是目前grid内部没有悬停效果。如果我删除 class="well" 我可以看到悬停效果。悬停颜色似乎与孔class颜色相同。

Demo

问题不在于您的代码。这是因为 Bootstrap 将相同的颜色应用于悬停的 table 单元格,因为它用于孔背景。

用这个 CSS 反转效果:

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

Demo