The only way I could see this being possible with css is to somehow use the :not selector, but I can't figure it out. The comments below illustrate what hover state should be active when a mouse-over occurs.
<div class='node'> // node is activated
<div class='node'></div> // node is activated but parent is de-activated
<div class='node'> // node and children are activated but parent is de-activated
<div class='node'>
<div class='node'></div>
</div>
</div>
</div>
Plunkr: