Menu
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">
533
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.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
