Vibrate boot table with row exceptions
I have a table that supports hovering through class="table-hover"
. However, I want some lines (having different colors) not to stand out when hovered.
I copied the hover rule from bootstrap and adjusted its tr.no-hover:
.table-hover tbody tr.no-hover:hover > td,
.table-hover tbody tr.no-hover:hover > th {
background-color: inherit;
}
My idea was that in this way it should display the original (i.e. uncovered) row color, as I wanted it to no-hover
apply to different colors. But it didn't work. Also did not indicate transparent
as color.
Basically I need to remove the hover effect on some lines. Is there a way to do this?
source to share
Since you need to be more selective about which lines you want to apply the hover effect to, it might be easier to create your own CSS hover effects rather than using a bootstrap class for bootstrapping.
Demo (thanks to dfsq for the base): http://plnkr.co/edit/INuppBzm7r4r7bqvCJm5?p=preview
You can use the following CSS (using no selector) to apply the background color when hovering over table rows without a specific class.
CSS
tr:not(.no-hover):hover {
background-color: green;
}
source to share
For anyone interested in how to get this to work, I found a solution that works with removing the hover effect without specifying a separate hover color for each color used.
http://plnkr.co/edit/phGI6csBqmOXML1spLV4?p=preview
The key point here is setting a custom color on the tr element so that the cells are colored correctly and additionally
.table-hover > tbody > tr.no-hover:hover > td,
.table-hover > tbody > tr.no-hover:hover > th {
background-color: inherit;
}
what is inherited is the color tr.
Unfortunately, I don't have IE on hand to test its behavior.
This is especially useful when you are using custom colors on some table rows and the rest should be the standard Bootstrap colors. This way you don't need to replicate the Bootstrap cursor color.
source to share
.table-hover tbody tr.no-hover.success:hover > td,
.table-hover tbody tr.no-hover.success:hover > th {
background-color: $brand-success;
}
.table-hover tbody tr.no-hover.warning:hover > td,
.table-hover tbody tr.no-hover.warning:hover > th {
background-color: $brand-warning;
}
and so on, I would say ...
source to share