CSS hover recursively on all child elements

Question

I am attempting to change the background-color attribute on ALL child elements of root on hover. I have tried the following:

.app_setting *:hover { background-color: yellow; }

*:hover { background-color: yellow; }

html *:hover {background-color: yellow; }

<html class="parent">
</html>

.parent *:hover {background-color: yellow; }

I have also tried these links:

CSS for hover that includes all child elements

CSS :hover to affect all child divs

The above seems to only affect and change the background-color of <a> tags. Besides using javascript or assigning each element to a specific class is their another way to do this using CSS?

EDIT:

Fiddle deleted as this is a homework assignment and I do not want to share code BUT,

The fiddle DOES change child elements background-color attribute with

body *:hover {
    background-color: yellow;

}

as it is expected to. But when opened in an HTML doc background-color is only applied to <a> tags. I have tried with the same effect in Firefox and Chrome.

Above problem was simple just needed to add a valid doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

On IE6 hover only works on `` (anchor) elements. I hope you aren't using IE6? — nicholaschris, Jun 30 '14 at 17:53
Can you post a simple demo to show this 'not working,' that way we can see what *is* happening and offer suggestions? One of the answers suggests using `:hover *` to style the descendants of the hovered elements, but your question implies you want to style the hovered-element (and its ancestors, or more correctly 'all the hovered elements' as CSS lacks a parent-selector) with `*:hover`. So I'm not sure, now, what you're asking. Or how it doesn't work. — David Thomas, Jun 30 '14 at 18:01
Updated with fiddle above. Strangely it DOES work in a fiddle but does not work when opened in a HTML doc. It acts the same when opened in different browsers. — andrsnn, Jun 30 '14 at 18:05

Smeegs · Answer 1 · 2014-06-30T18:03:41.450

6

I believe what you're looking for is something like

.rootclass:hover *{
    background-color: green;
}

if you want to only do direct descendents, make sure to use > instead of space, like so.

.rootclass:hover > *

Here is a fiddle

When you hover over any part of the parent div, the background changes for every child element of that div.

edited Jun 30 '14 at 18:03

answered Jun 30 '14 at 17:57

Smeegs

9,151
5
42
78

what element would rootclass be assigned to? – andrsnn Jun 30 '14 at 18:00
1

Whatever you meant by `root`, I believe in your question you mentioned `.app_setting` so replace `rootclass` with `app_setting` – Smeegs Jun 30 '14 at 18:01
I added a fiddle to see it in action. – Smeegs Jun 30 '14 at 18:02

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

To put a hover on every element on the page.

Fiddle

body *:hover{
    border:1px solid red;
}

Edit:

As was pointed out in the comments, looks like what was really looked for here was how to apply a change to child elements on hover. While the code above is technically correct for that (will apply a red border to all children of the body tag, I think Smeegs has a more suitable answer below:

From Smeegs

.rootclass:hover *{
    background-color: green;
}

Where .rootclass is the parent class you want all children to be affected by on hover.

https://stackoverflow.com/a/24496116/1174118

edited May 23 '17 at 11:58

Community

1
1

answered Jun 30 '14 at 17:55

Blunderfest

1,854
1
28
46

using that code exactly does not work. It only puts the border styling on the a tags. – andrsnn Jun 30 '14 at 17:58
Hmm strange, I mean it makes sense that would work. I will add a fiddle of my site. – andrsnn Jun 30 '14 at 18:02
Well that DOES work on jsfiddle but does not when I open the html doc directly. – andrsnn Jun 30 '14 at 18:03
I believe the challenge is to apply hover to a particular element and all its children – pat capozzi Feb 04 '16 at 21:35
Good point @patcapozzi , I added a note on that as well as a reference to smeegs answer below, perhaps the OP will swap accepted answers. – Blunderfest Feb 05 '16 at 13:19

score 1 · Answer 3 · answered Jun 30 '14 at 17:58

IF you want to set a :hover effect to every child element you can use the syntax:

.app_setting :hover {
    background-color: yellow;
}

if you want every child on any level to have the hovering effect.

Or you can use:

.app_setting > :hover {
    background-color: yellow;
}

if you want only direct childs to have the effect.

pbrenna · Answer 4 · 2014-06-30T18:06:55.407

1

You can use:

.app_settings:hover *{ }

as pointed out by Smeegs, or if you want to set different backgrounds to different childs, you use the syntax:

.app_settings:hover .childclass1{}

.app_settings:hover #child2id{}

NOTE that if your elements already have a background-color set, you might have to use !important

edited Jun 30 '14 at 18:06

answered Jun 30 '14 at 18:03

pbrenna

61
3

CSS hover recursively on all child elements

4 Answers4