How to hover on child element but not on parent

Is it possible to style only child element on hover, without styling parent element?

Consider such structure:

<div class="foo">
    <div class="bar"> </div>
    more elements
</div>

CSS:

.foo:hover{
    //some style
}

.bar:hover{
    //some other style
}

What I would like to achieve, when pointer hovers over .bar, is to trigger hover effect only on .bar and not on .foo element. When pointer hovers over .foo but outside .bar, I would like to affect just .foo. Is that even possible?