/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

27 votes186 views1 answer
How to set text color in ingredient
CSS
0 vote173 views1 answer
Css button click color
CSS
0 vote196 views1 answer
Apply image as full screen responsive background
CSS
1 vote213 views1 answer
How to scale a bg image acc to size of div
CSS
0 vote221 views1 answer
Css top right corner
CSS
-1 vote190 views1 answer
Link design like a Button"
CSS
0 vote206 views5 answers
Sweetalert to small bootstrap
CSS
0 vote210 views1 answer
How to center an overlay button using css transform and translate
CSS
0 vote180 views1 answer
How input field bottom shadow in css
CSS
0 vote191 views1 answer
Meaning of bbc
CSS