How to apply child:hover but not parent:hover

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.

  .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; }

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

Leave a Comment