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.