Question

我有一个截图如下所示，我已经在Bootstrap 4中复制了。

在屏幕截图中，行悬停时会显示 background-color：#EDEDED; 。

以上屏幕截图中的fiddle。

我为创建表而使用的HTML代码是：

<div class="body-manage-attendees">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Number</th>
                <th scope="col">Table</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Amanda Doe</th>
                <td>250</td>
                <td>2</td>
                <td>Bill</td>
            </tr>
            <tr>
                <th scope="row">Andy Doe</th>
                <td>14</td>
                <td>1</td>
                <td>Bill</td>
            </tr>
            <tr>
                <th scope="row">Cameron Doe</th>
                <td>250</td>
                <td>4</td>
                <td>No Bill</td>
            </tr>
            <tr>
                <th scope="row">Dana Doe</th>
                <td>53</td>
                <td>5</td>
                <td>Bill</td>
            </tr>
            <tr>
                <th scope="row">Fred Doe</th>
                <td>250</td>
                <td>2</td>
                <td>Bill</td>
            </tr>
        </tbody>
    </table>
</div>

问题陈述：

我想知道我需要在CSS中添加什么，以便在行悬停时，会出现 background-color：#EDEDED; 。

Answer 1

bootstrap 3类似乎仍然有效。尝试将悬停类添加到您的表中。

<table class="table table-hover">

通过这样做，应用了bootstrap中的CSS类：

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.075);
}

随意覆盖该类并将颜色更改为您想要的颜色！

Answer 2

将 .table-hover 类添加到您的表中：

<table class="table table-hover">

另外你也使用CSS：

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

修改：updated JSFiddle

如何设计bootstrap 4元素？

2 个答案: