/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

22 votes417 views2 answers
React bootstrap carousal not working
CSS Bootstrap
9 votes337 views5 answers
How to make a triangle in css
CSS
0 vote329 views2 answers
Add transition to zoom button on hover
CSS
0 vote376 views1 answer
Space between label and input form
CSS
3 votes349 views5 answers
Css keep aspect ratio image
CSS
0 vote334 views2 answers
Make img black and white css
CSS
3 votes324 views1 answer
Add new class in tailwind css
CSS
12 votes349 views2 answers
Other children than first css
CSS
0 vote368 views1 answer
Restore mariadb from bz2 file cli
CSS
2 votes302 views1 answer
Css content space
CSS