0

I've got this setup where I use a hover effect for my collapsable menu. Everything works find but I'd like to disable the hover effect on the disabled element. The point is; only by looking at the children of the element that has a hover effect you know it is collapsed or not.

Example:

<div class='panel'>
    <div class='in'>
        Menu item 1
    </div>
</div>
<div class='panel'>
    <div class='collapse'>
        Menu item 2
    </div>
</div>
<div class='panel'>
    <div class='collapse'>
        Menu item 3
    </div>
</div>

So my panel hover effect works just fine:

.panel:hover {
  color: blue;
}

The thing is that I want to exclude hover effect for the panel with the .in class as a child

Is this somehow possible without using javascript to give the parent a .in class aswell? I'm using a (twbs) plugin for the collapsable menu.

Dani
  • 2,448
  • 8
  • 27
  • 44
  • 1
    Unfortunately, no. You can write a selector for a child with a specific parent, but not for a parent with a specific child. – Barmar Jun 11 '14 at 20:42
  • 1
    the origin of the selecting path starts from `.in`, the end of the path should be `.panel`, so obviously it's a backwards path, in such a case CSS selector can't work. – King King Jun 11 '14 at 20:44
  • yeah I read about this. Though I was hoping there would be some kind of hack I didn't came across duckduckgoing the internet. Thanks for these short but enlightning responses guys! I'll just hack the javascript into adding .in classes to the parent too – Dani Jun 11 '14 at 20:58

0 Answers0