Have a TR and the one below it have a hover effect?

HTML & CSS
1

Hi,

I have a table which has a hover effect on each TR.

Is it possible to have the hover effect apply to the next TR under another based on a class?

For example:

<tr>
<td>text</td>
<td>more text</td>
</tr>

<tr>
<td>text</td>
<td>more text</td>
</tr>

<!-- have this TR and the one below it have the hover effect, but not the ones above ? -->
<tr>
<td>text</td>
<td>more text</td>
</tr>

<tr>
<td>text</td>
<td>more text</td>
</tr>

Thanks

2

The Adjacent sibling selector may do it.

3

Thanks.

I’ve tried this:

tr.package:hover:nth-child(1) {
    background-color: #FFFFCC;
}

but no luck :confused:

4

It uses a + symbol.

5

Thanks, I got it:

tr.package:hover + tr {
    background:#d8e2f5;
}

However, is there now a way to give a background to the TR above the top one if the bottom one is hovered over first?

6

Assuming I understand what you want then no you can’t do that as CSS doesn’t work upwards. It can only work downwards on descendants or subsequent siblings. It cannot make changes to parent elements via its child’s actions.

You would need to use js if you want to make changes above an element in the DOM.

7

I see.

Is there any correct way I can wrap multiple TRs somehow and apply a hover effect to that wrapper?

8

You can wrap multiple table-rows inside a tbody element and set a hover on the tbody element to affect a change on the child rows.

9

Thanks, I’ve not wrapped the TRs in a TBODY and used this, but it doesn’t apply the hover effect:

tbody.package tr:hover{
	background: #000
}

However, it works if I use TD:

tbody.package td:hover{
	background: #000
}
10

Hi,

That’s not what you asked for. You said you wanted to hover the parent and change the colour of the children.

e.g.

tbody:hover tr{background:red}

However that won’t be compatible with your initial request because trs will only now be siblings within each tbody block.

I think we need a clear explanation of the process you want to achieve. If for example you have multiple rows in a table and you want to change the background of not only the next row in a table but also the previous row then you will need to script it.

11

Hi,

I am trying to apply a background on hover for multiple rows in a table. Doing it using siblings is not working as when the second row is hovered over, the one above it does not have a background. I tried the method of wrapping them in a TBODY so all TRs in the TBODY have a background when hovered over.

Hope that makes sense :confused:

12

Actually it’s still not clear what you are trying to do.

What do you want to happen when you hover a single table row?

Originally you said you just wanted the next row to change background color but do you want them both to change background colour as a pair?

As I said above you won’t be able to do the reverse without scripting,

It may help if you provide a full html/css example and then explain where it is going wrong.:slight_smile:

13

I think I may have worded what I want wrong.

Basically from what I’ve gathered from above, what I would like to do is to apply a background colour on all TRs inside a TBODY with a specific class on hover.

14

What does “top apply” mean?

15

Sorry, “to apply”. I’ve edited the post.

16

So you are styling a whole group of rows on hover?

17

Yes that is correct

18

No that is not correct as I have given you the code for that already and you said it was not what you wanted ?

tbody:hover tr {background:red}

You can hover two (or three, or four etc…) rows together using the code already offered at the start of the thread but only from the current row downwards. You can’t go back up without a script unless you have fixed height rows and then you could absolutely place a background but would be very hacky and likely to break.

19

Thanks, but i’m not having much luck - its not giving all the rows a background at once no matter which is hovered over.

[code]

text
Product
text

                <tr>
		<td>text</td>
                    <td>Product</td>
                 	<td>text</td>
                </tr>
[/code] 
tbody.package tr:hover{
	background:  #ff0000!important
}

or

tbody.package:hover{
	background:  #ff0000!important
}
20

Does that mean that the rows above the one being :hovered do not color or does that mean that none of the rows have a background color?

If you want to color the background of the table, just apply :hover and background-color to the table.