Question

我有一张使用Bootstrap的“table”和“table-hover”类

的表

缩略图必须与底部边框的左侧齐平，如下图所示:(对不起笨拙的图像 - 我必须增加我的StackOverFlow代表来发布图像）。

当鼠标悬停在一行上，激活表格悬停类时，蓝色高光效果应与底部边框的右侧齐平，但延伸超过底部边框左侧约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;
}

Answer 1

首先，删除CSS中的那些！重要标志，它破坏了特征（如果这是你的目的，父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/

制作Bootstrap＆＃39;表＆＃34; ＆＃34;表-哈弗＆＃34;突出显示在底部边框的左侧

1 个答案: