【发布时间】：2015-05-11 02:15:30
【问题描述】：
我有一个使用 Bootstrap 的“table”和“table-hover”类的简单表格
在每个相同的表格行内如下：
- 缩略图
- 标题 (H5) 必须是黑色文本
- 3 段文本（span）元素，从标题缩进，必须是灰色文本
- 一个下载按钮拉到右边（实际上是一个很棒的字体图标）。还必须是灰色图标和灰色文本
期望的结果是，当悬停在行（行内的任何位置）时，所有文本（标题、跨度、字体真棒图标和下载链接）将文本颜色变为白色，将行背景变为蓝色。
到目前为止，我已经设法将背景蓝色全部变成白色，除了标题。
我真的希望 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;
}
【问题讨论】：
标签： html css twitter-bootstrap