Child row: inherit parent row style while hovering
Child row: inherit parent row style while hovering
Bannix
Posts: 5Questions: 1Answers: 0
Hello,
i have the following issue:
I styled my table rows to have a grey background when hovering over it:
tr:hover td{
background-color: #ebebeb !important;
}
When using the responsive extension, one gets child rows if the viewport width is too small. They are of course unaffected by their parents hover property, as they are in a seperate tr. How can I let the child rows have the same hover background-color as their parents?
Thanks
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
live.datatables.net/qulutaju/1/edit?html,css,js,output
Here is the test case. Its just a default DataTable with responsive: true and the styling I already mentions, nothing else.
Maybe my wording in the first post was not exactly clear: I want the child row background color to change as well as I hover over the parent row.
I see what you mean - I'm sorry to say that isn't possible in CSS, since there is no way to select a previous sibling. You'd likely need to use Javascript to detect the hover on the child row and then add / remove a class as required to the host element.
Allan
I see, thank you anyways for your time!
I am now just using
tr.parent:hover + tr.child td{
background-color: #ebebeb !important;
}
which is almost what I want, but much easier!
Nice, I wasn't aware that was possible. Thanks for reporting back,
Colin
Yup - that will do nicely for hovering over the parent row and highlighting the child, but not the reverse.
Although based on the SO discussion above it looks like it might become possible with CSS level 4 selectors.
Allan