Hover on a child element, change CSS on parent?

Problem

I'm using ZeroClipboard to copy to the clipboard. This places an invisible flash movie over my element, this enables access to a users clipboard.

I'm having trouble with the css.

I have a list, with elements looking like:

<li>
    <div class="btn-holder">
      <div class="clipboard">copy to clipboard</div>
    </div>
</li>

Here's the CSS (SASS):

li{
    &:hover .btn-holder{
        opacity: 1;
    }
}

.btn-holder{
    opacity: 0;
}

When you hover over an li element, it's child .btn-holder element fades in.

The problem that I am having is that when the user hovers over the flash movie (this is over the div with the class .clipboard), the hover over the li element fails and .btn-holder fades out.

ZeroClipboard have anticipated this and added a class to the element when it's hovered, so on hover .clipboard would have a class:

zeroclipboard-is-hover

How can I add this to the CSS so that when this class is present on .clipboard, the .btn-holder does not fade out?

Problem courtesy of: panthro

Solution

There's currently no way in CSS (or SCSS) to select a parent element. You'll have to do this through JS via a .parent() method and add an active class that mimics your hover state.

Solution courtesy of: geebru

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.