How to style the parent element when hovering a child element?

by

I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).

If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)
Note that <img> tag (for example) doesn’t do the trick.
Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    
<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Edit:
As Shadow Wizard kindly noted: it’s worth to mention this won’t work for IE10 and below. (Old versions of FF and Chrome too, see here)

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. How to overlay one div over another div
  3. Can I set an opacity only to the background image of a div?
  4. What is the difference between id and class in CSS, and when should I use them? [duplicate]
  5. inline-block boxes not fitting in their container [duplicate]
  6. Fixed background image with ios7
  7. Prevent flex items from rendering side to side
  8. How to remove the default arrow icon from a dropdown list (select element)?
  9. Setting a max character length in CSS
  10. How to increase space between dotted border dots
  11. How to center nav-items in Bootstrap? [duplicate]
  12. How to prevent line breaks in list items using CSS
  13. How to stretch flex child to fill height of the container?
  14. Set width of dropdown element in HTML select dropdown options
  15. CSS selector with period in ID
  16. Get input type=text to look like type=password
  17. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  18. How to display text, a dotted line then more text spanning the width of the page?
  19. How can I apply a border only inside a table?
  20. What does the clearfix class do in css? [duplicate]
  21. Center image in div horizontally [duplicate]
  22. Add spacing between vertically stacked columns in Bootstrap 4
  23. How to center an unordered list?
  24. a href link for entire div in HTML/CSS
  25. Center a large image of unknown size inside a smaller div with overflow hidden
  26. How to change border color of textarea on :focus
  27. Load a low-res background image first, then a high-res one
  28. Can I use an image from my local file system as background in HTML? [duplicate]
  29. How to keep styles after animation?
  30. overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Leave a Comment