Question

我有一个表'table-hover'的表。默认悬停在颜色上的是白色/浅灰色。我该如何改变这种颜色？

我尝试通过在我的主导样式表中添加以下内容来覆盖默认值

.table-hover tbody tr:hover > th {
  background-color: #D1D119;
}

不幸的是，上述情况不起作用

Answer 1

尝试一下：

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

Answer 2

这对我有用：

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

Answer 3

这是imo最简单的方法，它对我有用。

.table-hover tbody tr:hover td {
    background: aqua;
}

不确定为什么要将标题颜色更改为与行相同的悬停颜色，但如果这样做，则可以使用上述解决方案。如果你只是想要

Answer 4

HTML CODE ：

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>

CSS代码

.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #D1D119;
}

css代码表示：

鼠标悬停在行上：

.table-hover＆gt; thead＆gt; TR：悬停

th的背景颜色将更改为＃D1D119

个

对于tbody

会发生相同的操作

.table-hover tbody tr：hover td

Answer 5

这是通过grunt或其他任务跑步者编译的bootstrap v4

您需要更改group 'com.tung.poc' version '1.0-SNAPSHOT' apply plugin: 'java' sourceCompatibility = 1.7 repositories { mavenLocal() maven { url 'http://repo1.maven.org/maven2' } maven { url 'http://repo.spring.io/plugins-release' } } ext { springVersion = "4.3.4.RELEASE"; jsonPath = "0.9.1"; springBootVersion = "1.4.2.RELEASE"; } dependencies { compile("org.springframework.boot:spring-boot-starter-web:${springBootVersion}") { exclude module: "spring-boot-starter-logging" } compile("org.springframework.boot:spring-boot-starter-jetty:${springBootVersion}") compile "org.springframework:spring-core:${springVersion}" compile "org.springframework:spring-jms:${springVersion}" compile "com.netflix.hystrix:hystrix-metrics-event-stream:1.4.10" testCompile( "junit:junit:4.12", "org.mockito:mockito-core:1.10.8", "org.easytesting:fest-assert-core:2.0M10", "org.hamcrest:hamcrest-all:1.3", "org.springframework:spring-test:${springVersion}", "com.jayway.jsonpath:json-path-assert:${jsonPath}", 'nl.jqno.equalsverifier:equalsverifier:1.7.4' ) }以设置悬停时的突出显示

$table-bg-hover

Answer 6

尝试：

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }

Answer 7

对我来说@ pvskisteak5的答案造成了“闪烁效应”。要解决此问题，请添加以下内容：

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }

Answer 8

.table-hover tbody tr:hover td {
    background: #ffffff;
}

Answer 9

我发现我必须覆盖引导程序使用的名为 bs-table-accent-bg...

的“CSS 自定义属性”

.table-hover > tbody > tr:hover { --bs-table-accent-bg: #f8f8f8; }

路径是引导程序本身使用的。我从检查页面中得到了这一点。

因为如果我做其他解决方案所做的事情，我无法让突出显示变得比已经应用的引导程序更轻。这样，它就起作用了（即我可以使悬停颜色变浅）。

Answer 10

创建一个新类（anotherhover）而不是更改默认的table-hover类，并将其应用于需要此效果的表。

代码如下;

.anotherhover tbody tr:hover td { background: CornflowerBlue; }

Answer 11

.table-hover tbody tr:hover td {
    background: aqua;
}

这是到目前为止我能解决的最好的解决方案。在这样的场景中，它完美地表现了

Answer 12

例如，尝试使用Bootstrap的.table-hover类来实现hoverable rows

<table class="table table-hover">
  ...
</table>

如何将鼠标悬停在颜色上以悬停在Bootstrap中的表格上？

12 个答案: