How to not execute parent's :hover on child :hover

Issue

When the .post-item <div> is hovered I want to execute some specific styles (change background-color and cursor) but I don't want this to happen if the .rating-wrapper <div> is hovered too. This happens because I want the .rating-wrapper to do something different than the hover of its parent. Basic question: How to do only child's hover, ignoring the parent's hover

HTML:

<div class="post-item">
    <div class="rating-wrapper">
        <div class="upvote">
            <img src="/images/upvote_arrow.png" alt="upvote" />
        </div>

        <div class="rating"></div>

        <div class="downvote">
            <img src="/images/downvote_arrow.png" alt="downvote" />
        </div>
    </div>

    <span class="owner-data">
        <img src="" alt="" class="owner-avatar" />
        <span class="owner-username"></span>
    </span>

    <span class="creation-date"></span>

    <div class="title"></div>
</div>

Solution

Since you want to change the style of the parent element based on a pseudo-class of the child element, this isn't really possible with CSS alone today.

You can do it with the :has() pseudo-class but that is currently only supported in Safari (with support for Chrome a few months away and no sign of it in Firefox, Edge, Opera or elsewhere).

#parent {
  background: white;
  border: solid black 1px;
  padding: 2em;
  max-width: 50%;
  margin: auto;
}

#parent:hover:not(:has(#child:hover)) {
  background: orange;
}

#child {
  background: #aaa;
  border: solid black 1px;
  padding: 2em;
}

#child:hover {
  background: green;
}

<div id="parent">
  <div id="child"></div>
</div>

For a more reliable approach, you should probably look at adding a splash of JavaScript to the mix.

Use mouseenter and mouseleave events to modify the classes of the parent element, then reference the class in your stylesheet.

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

const enter = event => parent.classList.add('child-hover');
const leave = event => parent.classList.remove('child-hover');

child.addEventListener('mouseenter', enter);
child.addEventListener('mouseleave', leave);

#parent {
  background: white;
  border: solid black 1px;
  padding: 2em;
  max-width: 50%;
  margin: auto;
}

#parent:hover:not(.child-hover) {
  background: orange;
}

#child {
  background: #aaa;
  border: solid black 1px;
  padding: 2em;
}

#child:hover {
  background: green;
}

<div id="parent">
  <div id="child"></div>
</div>

Answered By - Quentin