/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

41 votes332 views6 answers
Linux folder size
CSS
2 votes330 views1 answer
New line in url
CSS
10 votes308 views2 answers
Css list items next to each other
CSS
1 vote320 views1 answer
Cs and cd in jfet
CSS
0 vote346 views1 answer
How to make a pixel in css
CSS
52 votes312 views6 answers
Center a div
CSS
0 vote311 views1 answer
Night / dark mode css
CSS
0 vote328 views1 answer
Bootstrap-navbar-containers
CSS
0 vote310 views1 answer
I need show the message for when we are clicking routing page in anularjs
CSS
54 votes295 views2 answers
How to center an image element inside a block in css
CSS