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.