I have a class called 'table-green-hover' which when set on a table makes it so that the hover colour is LightGreen instead of the usual bootstrap colour
.table-green-hover > tbody > tr:hover > td,
.table-green-hover > tbody > tr:hover > th { background-color: LightGreen; }
However for 2 specific rows in my table (with a class of 'logout-hover') I want those to be a completely different colour, I thought of doing it as
.logout-hover > tr:hover > td { background-color: LightBlue; }
Though it doesn't seem to be doing anything at all, when I hover over those 2 specific rows they still show with the LightGreen.
Edit based on OP's comment:
.table-green-hover tr.logout-hover:hover > td { background-color: LightBlue; }
Old answer:
.logout-hover > tbody > tr:hover > td { background-color: LightBlue; }
The reason is because
.table-green-hover > tbody > tr:hover > th (1 class, 3 elements) is more specific than .logout-hover > tr:hover > td (1 class, 2 elements), and thus got higher priority.
Related
I have a question about the Vuetify3 DataTables:
The icons and checkboxes are transparent, I can't change the property of this and i wish to change the headers of title with other color.
Someone can help me to resolve this?
Here is my code:
<v-data-table
v-model:items-per-page="itemsPerPage"
:headers="donner.headers"
:items="donner.content"
item-key="name"
class="blue-header"
show-select
>
</v-data-table>
<style>
.blue-header th {
background-color: blue;
};
</style>
The initial header background color is set by this declaration:
.v-data-table .v-table__wrapper > table > thead > tr > td,
.v-data-table .v-table__wrapper > table > thead > tr th,
.v-data-table .v-table__wrapper > table tbody > tr > td,
.v-data-table .v-table__wrapper > table tbody > tr th {
background: rgb(var(--v-theme-surface));
}
These selectors give a high specificity, that you need to match in your declaration.
Your blue-header class lands on the element with the v-data-table class, so this should do it:
.v-data-table.blue-header .v-table__wrapper > table > thead > tr th,
.v-data-table.blue-header .v-table__wrapper > table tbody > tr th {
background-color: blue;
}
Alternatively, you can pull out the crowbar and do background-color: blue !important;, but it is not really necessary in this case.
Icons Resolves:
I just forget to install the icons on my project.
So it's done now
" npm install #mdi/font -D "
Now my problem is to change the background of headers.
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;
}
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;
}
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;
}