I'm using Bootstrap 3 and applied table-striped table-hover to my table's class.
However, I have changed the default striped color to green. So I have green - white - green - white for my columns.
Now, when I hover, the white turns to blue. This is fine. But when I hover over the green, it stays green.
How can I have every row, on hover, show #ecf3f8?
I've tried this to no avail:
.table-hover tbody tr.odd:hover td, .table-hover tbody tr.odd:hover th {
background-color: #ecf3f8;
}
Sounds like a specificity problem. Try the following:
.table-striped.table-hover>tbody>tr:hover>td,
.table-striped.table-hover>tbody>tr:hover>th {
background-color: #ecf3f8;
}
Try this:
.table-striped tbody tr:hover td,
.table-striped tbody tr:hover th {
background-color: #ecf3f8
}
You can try it here: http://www.bootply.com/2Gp7XHJ9jV
Source: https://github.com/twbs/bootstrap/issues/3223#issuecomment-5735608
try this:
.table-hover tbody tr:hover td {
background: #ecf3f8 !important;
}
edit: also try this:
.table-hover > tbody > tr:hover > td {
background: #ecf3f8 !important;
}
Related
I'm using Twitter Bootstrap css for the table so the row background changes when hovered over
<table id="tableAppList" class="table table-condensed table-hover">
</table>
css:
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
When the row is clicked I add the "rowSelected" class to change the background colour
Typescript:
$("#tableAppList tr").on("click", (e: JQueryEventObject) => {
e.preventDefault();
var appName = $(e.currentTarget).find("td").eq(0).find("label").text();
this.selectedAppRowId = $(e.currentTarget).attr("id");
$(e.currentTarget).addClass("rowSelected");
this.getAppUsers(appName);
});
As expected the row loses it's "selected" background color when hovered over because of the table css.
So is there a way to override or ignore the table css class for the selected row?
Have tried this so far but doesn't work:
.rowSelected
{
background-color: #606060;
color: #FFFFFF;
}
.rowSelectedOverrideHover tr:hover > td
{
background-color: #606060;
}
Perhaps the only alternative is to not use the table-hover css class and instead add a class to the row when hovered using jQuery (a bit inefficient) which I can opt to ignore if it is selected.
Any other ideas out there?
Make sure your rule for your selected background uses a selector with a higher specificity than the selector for the hover. For example, this
tbody tr.rowSelected > td,
tbody tr.rowSelected > th {
background-color: #606060;
}
has same specificity, so if you put it after the rule for the hover it will override it in all cases.
I am trying to use the CSS3 :not selector. Basically, I have a table that when you hover a row, the background color changes:
.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th {
background-color: #272727;
}
On one of the <tr>'s I apply a latest-review class to the row. When I hover over thelatest-review row, the background color still changes because of the above CSS. I'd like it not to change colors. I've tried this and failed:
.table-hover tbody tr:hover > td:not(.latest-review), .table-hover tbody tr:hover > th:not(.latest-review) {
background-color: #272727;
}
I am not really sure what else to try at this point. I am using Chrome currently and I am not worried about the :not selector not being supported in older browsers.
Well, you write that .latest-review is applied to <tr>, but your code snippet uses <td> and <th>. Either way, it's easier imho to simply add a simpler second rule after your hover rule (and not use :not):
.table-hover tr:hover {
background-color: #272727;
}
.table-hover .latest-review {
background-color: %original_color%
}
The first CSS rule overrides the second. Either remove the first one or reset the color:
.table-hover tbody tr:hover > td.latest-review, .table-hover tbody tr:hover > th.latest-review {
background-color: default-color;
}
I have here an example where you can click on a row and it inserts a new row right underneath. The new row consists of a new table.
See fiddle
As you can see from the fiddle above, there is a hover over CSS in place for each table separately. The problem is now that the hover over from the parent table covers the second table.
I rather would like to override the hover over effect from the parent table when hovering over the new row, so that I can see the hover effect of the sub table instead:
I tried to prevent parent's table CSS to be applied on the new row like this:
table.cb_table-hover tbody tr:hover td:not(.override),
table.cb_table-hover tbody tr:hover th:not(.override){
background-color: #cfe2e8;
}
As you can see in this new fiddle:
However the results are not as I expected. What could I be missing?
Thanks
Try this.
CSS
table.cb_table-hover > tbody > tr:hover > td:not(.override),
table.cb_table-hover > tbody > tr:hover > th:not(.override){
background-color: #cfe2e8;
}
let me know if this helps you.
I have just added > to target direct child
Just use the CSS specificity:
.cb_inline_block {
display:inline-block;
}
.cb_table-hover tr:hover td,
.cb_table-hover tr:hover th{
background-color: #cfe2e8;
}
.cb_table-hover .sub_table-hover tr:hover td,
.cb_table-hover .sub_table-hover tr:hover th{
background-color: #cfe2e8;
}
I have a css for hovering over tables to highlight the current row.
.cb_table-hover tbody tr:hover td,
.cb_table-hover tbody tr:hover th {
background-color: #cfcfcf;
}
Additionally I could like to add another line to the same CSS to show a twitter bootstrap icon within the background of the hovered table row.
<i class="icon-search"></i>
At first I was thinking to utilise a background-image:url('??'); but the icon can't be defined like that.
Any idea if that possible? Thanks
Sure ! You cann't set background image with a image sprite
But you can put the icon inside td/th tag and use "display" to show/hide the icon:
.cb_table-hover tbody tr td .icon-search,
.cb_table-hover tbody tr th .icon-search{
display: none;
}
.cb_table-hover tbody tr td:hover .icon-search,
.cb_table-hover tbody tr th:hover .icon-search{
display: inline-block;
}
Is there a simple way to remove the tr:hover style from twitter bootstrap such that I can still use their table styling without getting the row highlight on hover?
#Blender's answer is right on, but only if you are not using the .table-striped class on your table.
If you are using the .table-striped class, the row highlight will not go away when you hover over a row that has the light-grey colored stripe.
What will happen when you hover over the light-grey row is that the row will change from light-grey to transparent (white), and thus you will be inadvertently implementing a row-hover effect on all the light-grey colored rows.
If you need to take away the hover effect from the striped rows as well, then building upon Blender's original answer, I think you would have another rule to over-ride:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: transparent;
}
.table-striped tbody tr:nth-child(odd):hover td {
background-color: #F9F9F9;
}
good example: Here's a link to a working jsfiddle example where the .table-striped class is accounted for:
http://jsfiddle.net/pXWjq/
buggy example: And here's an example where the table row hover still happens (on the grey rows) because the grey-row hover is not accounted for:
http://jsfiddle.net/448Rb/
Override these rules:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: #f5f5f5;
}
Using this:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: transparent;
}