CSS hover on a div, but not if hover on his children [duplicate]

Question

I looked if this question had already been answered, but couldn't find anything, only questions on the reverse css rule I am looking for.

I have a div that contains one or more child, and I want it to change its background on hover, but not if hovering one of its children; I need the :hover rule to be restricted to pure element, not its offsprings it contains. Being not a parent rule in CSS, and being :hover triggered whenever the mouse passes over the parent AND its children, I find myself out of ideas, and maybe this result is impossible to achieve with only CSS. However, the question is about CSS, so no JS or JQuery solution is needed (I can provide that by myself)

Code:

HTML

    <div class="parent">Text of the parent
        <p class="class1">I do not need to trigger parent's background color change!</p>
    </div>

CSS

    .parent {
       background: #ffffff;
    }
    .parent:hover {
       background: #aaaaff;
    }
    .class1 {
       margin: 10px;
    }

Answer 1

You can simply achieve this by adding this property to the child class CSS.

pointer-events: none;

This worked for me.

Answer 2

2023+ edit: We now have this functionality in all major browsers using the :has() psuedo-class (perhaps double-check your browser needs). So now you can do this:

.parent:hover:not(:has(*:hover)) {
  background: red;
}

<div class="parent">Something to hover of the parent
    <p>Child content: hovering me does not trigger the parent's hover!</p>
</div>

---

Original answer: The ability to stop an element's hover effect when the child is hovered is not currently possible with the CSS selectors that we have, this is as close as we can get without JavaScript - affecting the child on hover in addition to affecting the parent. This will only work if the child is 100% of the width and height of the parent.

Answer 3

Fiddle based on this answer:

<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>

You should go with JavaScript on this. It's currently not really possible with pure CSS, as Zack Saucier already said.

Answer 4

You cannot do that with pure CSS, but it's easy to achieve with jQuery. So when you hover over a child, you do not want to amend the parent.

https://jsfiddle.net/8nqfLgsk/2/

$(".list-categories li a").hover( function(){

   $(this).toggleClass("active-btn");

});   

Basically with this, you're only adding a class to the element which you're hovering over, without amending parent.