Will
Reputation: 13
Need Bootstrap's " table table-hover" to allow for highlighting white all row text
I have a simple table that utilizes Bootstrap's "table" and "table-hover" classes
Inside each identical table row is the following:
- Thumbnail
- Heading (H5) which must be black colored text
- 3 pieces of text (span) elements, indented from the heading, which must be grey colored text
- A Download button pulled to the right (actually a font awesome icon). Also must be a grey icon and grey colored text
The desired result is that when hovering the row (anywhere inside row), all the text (heading, spans, font awesome icon and download link) turn the text color white and the row background blue.
Thus far I have managed to make the background blue all turn white except for the heading.
I was really hoping the CSS :not() selector would do the trick, but no such luck.
I am a newbie, so have probably gone about it the wrong way.
Any help is really appreciated. Thanks in advance!
You can see the approach I took on this JS Fiddle
The 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>
The 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;
}
Upvotes: 1
Views: 1409
Answers (2)
Hynes
Reputation: 3424
You forgot a closing quote on your image tag:
<img class="pull-left" id="thumbnail" src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" style="height:100px; width:100px;>
If you add that in, it works correctly.
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>Upvotes: 1
Turnip
Reputation: 36642
Your current :hover selector isn't specific enough to override the h5 styling:
#Table > table > tbody > tr > td > div > h5{
color:#323333;
}
Add this to your CSS:
#Table > table > tbody > tr > td:hover h5 {
color: #fff;
}
Upvotes: 1
Related Questions
- How do I change the hover over color for a hover over table in Bootstrap?
- Bootstrap table single cell hover
- Bootstrap table row hover
- Highlight bootstrap row on hover
- Bootstrap 4 table hover color
- Using CSS and Bootstrap 3 in order to highlight the currently hovered-on row and column of a html table
- Hover highlight for tables not working in Bootstrap 4
- Bootstrap table-hover border-top color change
- Bootstrap table-hover for all rows, not just every other
- Twitter bootstrap take out the hover background color on tables