1

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:

http://plnkr.co/edit/tGNAAPJ9vKedvy3yjmQk

Jeremy Smith
  • 14,727
  • 19
  • 67
  • 114
  • [Check this](http://stackoverflow.com/questions/2700783/css-how-to-apply-childhover-but-not-parenthover) but probably not as you asked. – The Alpha Sep 23 '13 at 20:48
  • [This may give you an idea](http://plnkr.co/edit/wg2yOWnvIxJsUnXU5BqG?p=preview). – The Alpha Sep 23 '13 at 20:53
  • 2
    The simple answer is no, not with current CSS. The problem here is CSS currently has no way of moving "up a level" in your selector path. Essentially you can't just do .child:hover .parent {} In level4 css selectors I believe there are plans for selector like the descendent child selector that performs essentially the opposite function. I can't confirm this though and even if it did exist it will have 0 support at this time. You best solution is javascript. – Michael Sep 23 '13 at 21:03
  • yeah, without a [parent selector](http://stackoverflow.com/q/1014861/1937302), I can't see how you'd make this work. – Ben Jackson Sep 23 '13 at 21:21

0 Answers0