I am trying to remove the background color of a tr element on a table with Material Design Lite.
I'm using Sass.
This is the code causing the effect:
.mdl-data-table tbody tr:hover {
background-color: #FFFFFF !important;
}
This is the code I'm using with no positive results:
.mdl-data-table tbody tr:hover{
tr:hover .no-hover{
background-color: #FFFFFF !important;
}
}
What am I missing to achieve the behavior I require?
You're targetting:
tr:hover .no-hover {
background-color: #FFFFFF !important;
}
That's looking for a table row with a child with the class no-hover (presumably the table cell). The background colour is actually being applied to the row itself.
I believe what you're looking for instead is:
tr.no-hover:hover {
background-color: #FFFFFF !important;
}
Which targets a row with the class no-hover.
Hope this helps!
I had the same problem and solved a little bit different with same result:
.no-hover tbody tr:hover {
background-color: #FFFFFF !important;
}
and put the class 'no-hover' in the table tag.
Related
We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
got styled css table but for some reason the row styling is being cut off, css inspector is showing any obvious error. attached is the css and table
example of issue
see codepen
Using background on td Instead of tr will solve your problem.
table.striped tr:nth-child(even) td {
background-color: #fff;
}
table.striped tr:nth-child(odd) td{
background-color: #efefef;
}
Updated Codepen
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
I have the following situation :
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover {
background-color: #fff;
cursor: pointer;
}
.unclickable_table tbody tr:hover {
background-color: inherit;
cursor: default;
}
Now the tr originaly is green color, and i want when a table has class='data_table unclickable_table' set, that on hover on a tr that has table_green class, the background-color property won't change and stay green, but inherit doesn't seem to work
Example html :
<table class='data_table unclickable_table'>
<tbody>
<tr class='table_green'>
<td>Untill it goes Click!</td>
</tr>
</tbody></table>
Or this fiddle : http://jsfiddle.net/nyDNc/1/
Any help?
This is a solution, hopefully one that will work within your structure cause it depends on how you're styling your table elements.
inherit won't work because it is inheriting from the table which has a background of none. Instead you can have the tr set and change the colour of the td on hover, so that it has a context to inherit from.
See the working example here on JSFiddle.
The CSS is:
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover td {
background-color: #fff;
cursor: pointer;
}
.unclickable_table.data_table tbody tr:hover td {
background-color: inherit;
cursor: default;
}
Why do you add a second class in order to override the effect the first class has. Why don't you just remove the 'data_table' classes on the rows you don't want the effect on.
i'm not sure i understand You very well, but
DEMO IS HERE:
http://jsfiddle.net/nyDNc/1/
I have a table that highlights all the odd rows.
To do this, I just check what the row number is and apply the alt class to said row.
I then highlight the row on hover using a simple :hover in the CSS file.
It highlights the non-.alt rows perfectly, but not the alt rows.
Here is my CSS code:
.datagrid tr:hover, .datagrid tr.alt:hover {
background-color:#497A43;
color:#D3F0D4;
}
What am I doing wrong?
dont apply those cumbersome class changing methods. Instead use the css selector
.datagrid tr:nth-child(even):hover {background: #CCC}
.datagrid tr:nth-child(odd):hover {background: #FFF}
js fiddle
It works without needing the .alt selector.
See http://jsbin.com/ixokoj/2/edit
instead of
.datagrid tr:hover, .datagrid tr.alt:hover
{
background-color:#497A43;
color:#D3F0D4;
}
use the following
.datagrid tr.alt:hover
{
background-color:#497A43;
color:#D3F0D4;
}
The above will apply the background color and color to the rows which has class as "alt" and only when they are hovered.
Hope this helped.