/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

20 votes133 views3 answers
Center align div vertically and horizontally css
CSS
2 votes122 views2 answers
Css grid make all rows same height
CSS
0 vote137 views1 answer
Css styles responsive password input eye
CSS
2 votes112 views1 answer
Transition syntax css
CSS
0 vote131 views2 answers
Materialize css for react
CSS
0 vote117 views1 answer
Html input type colour internal border
CSS
0 vote110 views2 answers
How to Reveal Content on Hover with Expanding Corner Tabs in Divi
CSS
0 vote117 views1 answer
Alpine extract data to script tag
CSS
0 vote130 views1 answer
Media screen tablet
CSS
164 votes125 views4 answers
Html head css link
CSS