html - 使Bootstrap“表格”“表格悬停”突出显示在底部边框的左侧之外

我有一个使用Bootstrap的“表”和“表悬停”类的表

缩略图图像必须与底部边框的左侧对齐，如下图所示：（抱歉，图像笨拙-我必须增加StackOverFlow表示才能发布图像）。

当鼠标悬停在一行上并激活table-hover类时，蓝色突出显示效果应与底部边框的右侧齐平，但应延伸到底部边框的左侧之后约20px。

实际上，您需要在我的公共下拉框中查看此处的2张图像（信誉点不足，无法发布两个链接）Click here to view images

到目前为止，请参阅以下JSFiddle进行我的工作：JSFiddle

非常感谢您可以提供的任何帮助！

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="col-sm-10" id="Table">
    <table class="table table-hover">
        <!-- <thead>
            <tr>
                <th></th>
            </tr>
        </thead> -->

        <tbody>
            <tr>
                <td>
                    <div>
                        <img class="pull-left" id="thumbnail" src="http://a.abcnews.com/images/Technology/ht_new_planet_lpl_120718_wmain.jpg" style="height:100px; width:100px;">
                        <div id="searchResultHeading">
                            <h5>Heading Black then white on row hover</h5>
                        </div>
                            <span>some info grey then white on hover</span> &nbsp; &nbsp;
                            <span>some info grey then white on hover</span> <br>
                            <span>some info grey then white on hover</span> &nbsp;  &nbsp;
                        <div class="pull-right table-hover" id="downloadButton">
                            <a href="#">
                                <i class="fa fa-cloud-download"></i> Download
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <img class="pull-left" id="thumbnail" src="http://a.abcnews.com/images/Technology/ht_new_planet_lpl_120718_wmain.jpg" style="height:100px; width:100px;">
                        <div id="searchResultHeading">
                            <h5>Heading Black then white on row hover</h5>
                        </div>
                            <span>some info grey then white on hover</span> &nbsp; &nbsp;
                            <span>some info grey then white on hover</span> <br>
                            <span>some info grey then white on hover</span> &nbsp;  &nbsp;
                        <div class="pull-right table-hover" id="downloadButton">
                            <a href="#">
                                <i class="fa fa-cloud-download"></i> Download
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <img class="pull-left" id="thumbnail" src="http://a.abcnews.com/images/Technology/ht_new_planet_lpl_120718_wmain.jpg" style="height:100px; width:100px;">
                        <div id="searchResultHeading">
                            <h5>Heading Black then white on row hover</h5>
                        </div>
                            <span>some info grey then white on hover</span> &nbsp; &nbsp;
                            <span>some info grey then white on hover</span> <br>
                            <span>some info grey then white on hover</span> &nbsp;  &nbsp;
                        <div class="pull-right table-hover" id="downloadButton">
                            <a href="#">
                                <i class="fa fa-cloud-download"></i> Download
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body, html {
height: 100%;
min-height: 100%;
}
a {
    color: #22c7fa;
}

#thumbnail {
    padding-left:0px;
    padding-right:5px;
}

.table.table-hover > tbody > tr > td:hover {
    background-color: #22c7fa;
    color: #fff;
}
.table.table-hover > tbody > tr > td > i {
    color: #inherit;
}
.table.table-hover > tbody > tr > td > div > a {
    color: inherit;
}
#downloadButton > a{
    color:inherit;
}

#table > table {
    margin-left: 97px;
    margin-right: 60px;
    overflow: auto;
    overflow-y: auto;
}
/*Make all text in the search results grey*/
#Table > table > tbody > tr > td {
    padding-left: 0px !important;
    color: #919191;
}
/*Make the headings in the search results black*/
#searchResultHeading {
    color:#323333;
}
/*Make all text in the search results turn white on hover*/
#Table > table > tbody > tr > td:hover {
    padding-left: 0px !important;
    color: #fff !important;
}
#Table > table > tbody > tr > td:hover h5 {
    color: #fff;
}
/* Indent the search results details */
#Table > table > tbody > tr > td > div > span {
    padding-left: 6px;
    font-weight: 200;
}

最佳答案

首先，在CSS中删除那些！important标志，这破坏了特殊性（如果这是您的目的，则父ID应该足以获得更多特殊性）。然后，您要为其添加以下规则：

#Table .table.table-hover > tbody > tr:hover > td:first-child{
    padding-left: 20px;
}

并可能添加一些过渡：

.table.table-hover > tbody > tr > td{
    -webkit-transition: all .3s ease;
}

https://jsfiddle.net/L2ugrhpf/1/

关于html - 使Bootstrap“表格”“表格悬停”突出显示在底部边框的左侧之外，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28952685/