How to change the style of child element when there is hover on parent element. I would prefer a CSS solution for this if possible. Is there any solution possible through :hover CSS selectors. Actually I need to change color of options bar inside a panel when there is an hover on the panel.
Looking to support all major browsers.
Yes, you can definitely do this:
.parent:hover .child { /* ... */ } This uses the :hover pseudoclass to restrict to elements matching .parent which are also hovered, and the descendant combinator (space) to select any descendant that matches .child.
Here's a live example:
.parent { border: 1px dashed gray; padding: 0.5em; display: inline-block; } .child { border: 1px solid brown; margin: 1em; padding: 0.5em; transition: all 0.5s; } .parent:hover .child { background: #cef; transform: scale(1.5) rotate(3deg); border: 5px inset brown; }<div class="parent"> parent <div class="child"> child </div> </div>
.parent:hover > .child?Yes, you can do this use this below code it may help you.
.parentDiv { margin: 25px; } .parentDiv span { display: block; padding: 10px; text-align: center; border: 5px solid #000; margin: 5px; } .parentDiv div { padding: 30px; border: 10px solid green; display: inline-block; align: cente; } .parentDiv:hover { cursor: pointer; } .parentDiv:hover .childDiv1 { border: 10px solid red; } .parentDiv:hover .childDiv2 { border: 10px solid yellow; } .parentDiv:hover .childDiv3 { border: 10px solid orange; }<div class="parentDiv"> <span>Hover me to change Child Div colors</span> <div class="childDiv1"> First Div Child </div> <div class="childDiv2"> Second Div Child </div> <div class="childDiv3"> Third Div Child </div> <div class="childDiv4"> Fourth Div Child </div> </div>
align : cente. Did you mean align: center? Also, this doesn't appear to add anything to the existing answer. It just has a bunch of extra styles. New answers should be reserved for novel solutions that haven't already been given.you can use this too
.parent:hover * { /* ... */ } 
While the accepted solution is correct, the hover styles are being applied to both the parent and child element. This is because the parent contains the child inside its "box".
If anyone, for whatever reason, is curious about how to apply styles to a child element only when the parent is hovered, try this:
.parent { height: 100px; width: 100px; background-color: blue; } .parent:hover .child { background-color: red; } .child { height: 100px; width: 100px; margin-left: 100px; background-color: green; pointer-events: none; /* this line does the trick */ }<div class="parent"> <div class="child"></div> </div>