我有一个简单的表，它使用Bootstrap＆＃34; table＆＃34;和＆＃34; table-hover＆＃34;类
在每个相同的表格行中，如下所示：
期望的结果是，当悬停行（行内的任何位置）时，所有文本（标题，跨度，字体真棒图标和下载链接）将文本颜色变为白色，行背景变为蓝色。
到目前为止，我已设法使背景蓝色全部变为白色，除了标题。
我真的希望CSS：not（）选择器可以做到这一点，但没有这样的运气。
我是新手，所以可能是错误的做法。
非常感谢任何帮助。提前谢谢！
您可以看到我对此JS Fiddle
采取的方法HTML：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body cz-shortcut-listen="true">
<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://velocityagency.com/wp-content/uploads/2013/08/go.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>
<span>some info grey then white on hover</span> <br>
<span>some info grey then white on hover</span>
<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>
</body>
CSS
body, html {
height: 100%;
min-height: 100%;
}
a {
color: #22c7fa;
}
.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;
}
#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*/
#Table > table > tbody > tr > td > div > h5{
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;
}
/* Indent the search results details */
#Table > table > tbody > tr > td > span {
padding-left: 6px;
font-weight: 200;
}
答案 0 :(得分：1)
您当前的:hover选择器不够具体，无法覆盖h5样式：
#Table > table > tbody > tr > td > div > h5{
color:#323333;
}
将此添加到您的CSS：
#Table > table > tbody > tr > td:hover h5 {
color: #fff;
}
答案 1 :(得分：1)
您忘记了图片代码的结束语：
<img class="pull-left" id="thumbnail" src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" style="height:100px; width:100px;>
如果你添加它，它可以正常工作。
body,
html {
height: 100%;
min-height: 100%;
}
a {
color: #22c7fa;
}
.table.table-hover > tbody > tr > td:hover {
background-color: #22c7fa;
color: #fff;
}
.table.table-hover > tbody > tr > td > div > 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;
color: #919191;
}
/*Make the headings in the search results black*/
#Table > table > tbody > tr > td > div > h5 {
color: #323333;
}
/*Make all text in the search results turn white on hover*/
#Table > table > tbody > tr > td:hover {
padding-left: 0px;
color: #fff;
}
/* Indent the search results details */
#Table > table > tbody > tr > td > span {
padding-left: 6px;
font-weight: 200;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body cz-shortcut-listen="true">
<div class="col-sm-10" id="Table">
<table class="table table-hover">
<tbody>
<tr>
<td>
<div>
<img class="pull-left" id="thumbnail" src="http://velocityagency.com/wp-content/uploads/2013/08/go.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>
<span>some info grey then white on hover</span>
<br>
<span>some info grey then white on hover</span>
<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://velocityagency.com/wp-content/uploads/2013/08/go.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>
<span>some info grey then white on hover</span>
<br>
<span>some info grey then white on hover</span>
<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>
</body>