+ 2
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.
16th Jan 2021, 7:54 AM
Josh Greig
Josh Greig - avatar