I am trying to make my table rows highlight when i hover my mouse over them
.Table .Popup tr:hover {
background-color:red;
}
Seems to work find on TD tags, but I seem to have trouble getting it to work for TR tags :
Fiddle :
http://jsfiddle.net/kUTDB/2/
Any idea what I am doing wrong?
The proper CSS should be this:
.Popup tr:hover td {
background-color:red;
}
.Popup .PopupRow:hover td {
background-color:red;
}
You can't (reliably) style a <tr>, so you need to apply the style to children <td>s on hover (hence tr:hover td.
Additionally, the .Table class doesn't refer to any elements in your fiddle, which may also be causing problems.
http://jsfiddle.net/kUTDB/12/
You can just do:
td:hover {
background-color:red;
}
try like this
.PopupContainer .Popup tr:hover {
background-color:red;
}
Fiddle
Your CSS selector was incorrect:
Both
table tr:hover {
background-color:red;
}
and
table .PopupRow:hover {
background-color:red;
}
will work here.
Fiddle: http://jsfiddle.net/kUTDB/7/
if you needed to be very specific, you could use this selector:
div.PopupContainer div.Popuptable table tbody tr.PopupRow:hover{
However, since longer selectors cost time, the more broad selectors are better. Really, you only need .PopupRow:hover here.
You need to do the td
tr:hover td {
background-color:red;
}
As stated on your previous question:
Your CSS selectors are not selecting anything.
.Table .Popup tr:hover {
background-color:red;
}
should be:
.Popup tr:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/4/)
and
.Table .Popup .PopupRow:hover {
background-color:red;
}
should be
table tr.PopupRow:hover {
background-color:red;
}
or
table .PopupRow:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/5/)
Mind you, these will both select the same elements so the selector with more specificity (the second one) will be the one that is actually used.
Your first selector, .Table .Popup tr:hover will match tr elements that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
Your second selector, .Table .Popup .PopupRow:hover will match any elements with a class of PopupRow that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
The markup in your fiddle does not reflect that structure and so nothing is matched by the selectors (which is why your style is not reflected).
.Popup tr:hover {
background-color:red;
}
This will totally work.
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;
}
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.
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/
Hi I would like to select only the first <td> (td with the text "label") of every row in a table, if you have a simple html like:
<table>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
</table>
I would like to assign for example a width of 10% only to the first <td></td> group with selector I DONT want to use a class.
I have tried the follow selectors:
table.widget tr:first-child td{
width:10%;
border:0;
}
But that selector only will pick the first td of the first tr no all the TD's so I tried
table.widget tr td:first-child{
max-width:10%;
}
Of course what I got is the selection of the first child of the TD. NOT the td itself
it's possible to accomplishing this?
Your second selector is actually correct:
http://tinker.io/40f64
table.widget tr td:first-child {
background: orange;
}
To select the first child of each td, the selector would be like so:
table.widget tr td :first-child { /* note the space after the td */
// styles
}
It should be noted, however, that the OP's sample table does not have the widget class applied to it.
If your table is expressing a collection of key/value pairs, placing your label text within a th might be more appropriate:
http://tinker.io/40f64/1
table.widget th {
background: orange;
}
<table class="widget">
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
</table>
One way:
table tr td:first-of-type {
background: lemonchiffon;
}
http://jsfiddle.net/PRrq5/2/
Try this:
table tr td:first-child { color: red; }
Fiddle: http://jsfiddle.net/74MFH/1/