/CSS/If child elemnt is hovered do changes to the container css

If child elemnt is hovered do changes to the container css

CSS can not select a parent div only when a specific child or descendent element is hovered.  You'll need some JavaScript to achieve what you seem to want.

JavaScript can be added to add something like a "hovered" class to your parent element when various mouse or touch events happen on the child div.  You could edit the CSS properties directly in JavaScript but I would use a CSS class just to keep more of the CSS concerns separate.



The :hover is closely related to your question but it doesn't solve your requirements.  :hover lets you select elements that are hovered over.  If the child is hovered, the parent is also hovered.  There is a problem though.
Here is an example of the problem with :hover:
HTML:
<div class="my-parent">
   <button id="ok">OK</button>
   <button id="cancel">Cancel</button>
</div>

CSS:
.my-parent:hover {
   background-color: green;
}
Say you want the background of my-parent to go red when hovering over "OK".  The above example will do that.  The problem is it'll go green when hovering over the Cancel button too.

Similar codes

11 votes205 views2 answers
Scss include
CSS
0 vote191 views1 answer
Side nav bar in materialize css
CSS Materialize
0 vote163 views1 answer
Css if screen size less than
CSS
0 vote167 views1 answer
Circular div css
CSS
0 vote177 views1 answer
Chrome remove black inline from click button
CSS
0 vote168 views1 answer
When change size image not change contrast css
CSS
2 votes173 views10 answers
Css
CSS
3 votes182 views2 answers
Backdrop filter all properties
CSS
0 vote176 views1 answer
Center a button wordpress
CSS
1 vote167 views1 answer
Css Use the correct background property to make the background image NOT scroll with the rest of the page.
CSS