/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

0 vote283 views1 answer
Wordpress smooth scroll to anchor
CSS
41 votes291 views6 answers
Media query for mobile min and max width
CSS
8 votes312 views1 answer
Align in the middle of page html
CSS
0 vote316 views1 answer
Shadow on hover class on card bootstrap
CSS
35 votes318 views3 answers
What does class="d-none d-md-block" mean in bootstrap?
CSS
6 votes318 views1 answer
All text in caps using css
CSS
0 vote302 views1 answer
How to middle div
CSS
0 vote368 views1 answer
Bootstrap accordion some change
CSS Bootstrap
8 votes295 views4 answers
Css left
CSS
1 vote291 views1 answer
Css div on the bottom
CSS