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/
Related
Here's ma code:
table.main-menu tr:hover td {
color: #654321;
}
table.main-menu tr:hover img.icon {
width:100px;
}
table.main-menu tr:hover h2.title {
font-size:2.5rem;
}
table.main-menu tr:hover p.subtitle {
font-size:1.2rem;
}
table.main-menu tr:hover {
cursor: pointer;
}
For each of these elements, I would like to apply special effects on all tr on which I'm NOT hovering, while I'm hovering on one of them. Example: if I'm hovering on row1, I want row2 and row3 to shrink, but when I'm not hovering on anything, they all go back "to normal".
Can I do that with CSS?
Thanks.
Hovering a row means you're also hovering the table itself. With that in mind, you can combine with the :not() pseudo-class selector:
table:hover tr:not(:hover) { /* Shrink styles */ }
tr:hover { /* Hovered row styles */ }
A word of warning: changing the size of content might cause the rows to shrink in height, meaning they will move up, and your cursor might then not be on the row you intended to hover.
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.
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 am making a table on a webpage inside Zetaboards forum software. When I am trying to create alternating background color for each row, the forum's default CSS intervenes.
My HTML:
<table class="stats">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
My CSS:
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
The above works just as I want it to in cssdeck.com. However, when I move it on my forum webpage, the forums "td" css takes over.
Forum CSS:
td {
background-image: ...;
background-color: ...;
background-position: ...;
...
}
How do I override the forum's default CSS?
I have tried adding !important, but it didn't work. I also tried to add a class for each "tr" and add tr.class in my css. That also didn't work.
I do have control over my forum's theme CSS. But I can't change it, since that "td" style is widely used across the forum design. I don't want to add a class to each td in my HTML either...
I appreciate any help I can get, thank you for your time!
Table cells are contained within table rows. When you apply background color to both rows and cells (as is the case with the above example) the cell background color will cover the rows' background color.
Workaround: add this rule to undo the forum's styles applied on table cells:
table.stats td {
background: transparent none;
}
And apply background color on rows (i.e. no change in your original example):
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
1.)you have to add td after tr in your css
Try this:
<style>
table.stats tbody tr td:nth-child(even) {
background-color: #333 !important ;
}
table.stats tbody tr td{
background-color: #232 !important ;
}
</style>
I have this page http://www.beatinganger.com/guildford/course-dates
On the thead of the table I have several headings that are links, that are the color of the main container css (red), however I can't seem to change it to white as the main containers css is automatically chosen, disregarding the css I have created.
This is the css I have. thead a color is showing as #9D2B2A and not white.
#left_container a {
text-decoration: none;
color: #9D2B2A;
}
thead a {
color: white;
}
th a {
color: white;
}
You're suffering from specificity - http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html
The id of #left_container is more specific than th or thead, so it takes priority.
Use #left_container th a or #left_container thead a to see your styles take effect.
Because you have an id selector on the container it is more specific than thead a which is a more general selector it is using the container one. Try putting the #left_container before thead a and th a.
#left_container a {
text-decoration: none;
color: #9D2B2A;
}
#left_container thead a {
color: white;
}
#left_container th a {
color: white;
}
id selector + type selector is more specific than two type selectors, so that rule wins in the cascade chain.
You need to make your selectors more specific (or use the one-shot sledgehammer of an abomination that is !important).
It's because that "#left_container a" have a higher priority
you can see css-priority-order-tips-tricks