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

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 >
    <div >
        <div >
            <img src="/images/upvote_arrow.png" alt="upvote" />
        </div>

        <div ></div>

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

    <span >
        <img src="" alt=""  />
        <span ></span>
    </span>

    <span ></span>

    <div ></div>
</div>

CodePudding user response：

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>

CodePudding user response：

You can use this CSS Selector,

.post-item>:not(.rating-wrapper):hover {
    background-color: white;
}

This will select all immediate children of .post-item which are not .rating-wrapper.

To change the block of the remaining items background color, you can enclose them in another div.

CodePudding user response：

There is a css property called not property.The syntax is like:

:not(element) {
// CSS Property}

If you want to learn more, please visit this link: https://www.geeksforgeeks.org/how-to-exclude-particular-class-name-from-css-selector/

CodePudding user response：

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

try:

pointer-events: none