How to apply child:hover but not parent:hover

by

So this is REALLY ugly, but it works (kind of). I’m basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn’t like it unless you use the + selector instead of the ~ selector. This isn’t very scalable, but it may work.

As the other guys posted, javascript would likely be a better solution.

 <style>
  .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
  .parent:hover { background-color: green; }
  .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
  .child:hover { background-color: blue; }
  .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
  .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

More Related Contents:

  1. How to change the cursor into a hand when a user hovers over a list item?
  2. What is the opposite of :hover (on mouse leave)?
  3. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  4. Is there any way to hover over one element and affect a different element? [duplicate]
  5. Change opacity on all elements except hovered one
  6. How to use ‘hover’ in CSS
  7. CSS: Hover one element, effect for multiple elements?
  8. How can I delay a :hover effect in CSS?
  9. SVG USE element and :hover style
  10. Does css hover work on mobile devices?
  11. CSS disable hover effect
  12. How can I change a button’s color on hover?
  13. Spin or rotate an image on hover
  14. image moves on hover – chrome opacity issue
  15. CSS: styled a checkbox to look like a button, is there a hover?
  16. hover on child without hover effect on parent [duplicate]
  17. div background color, to change onhover
  18. CSS hover border makes elements adjust slightly
  19. Is it possible to change only the alpha of a rgba background colour on hover?
  20. How to display and hide a div with CSS?
  21. Hover on child should turn off hover effect on parent [duplicate]
  22. Is there an opposite CSS pseudo-class to :hover?
  23. prevent a pseudo element from triggering hover?
  24. Margin on child element moves parent element
  25. How to remove Firefox’s dotted outline on BUTTONS as well as links?
  26. css3 transition animation on load?
  27. How to resize the ClipPath area of SVG?
  28. Next.js Global CSS cannot be imported from files other than your Custom
  29. Nested rows with bootstrap grid system?
  30. How do I line up 3 divs on the same row?

Leave a Comment