Hover on a child element, change CSS on parent?


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:

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

Here's the CSS (SASS):

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

    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:


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


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


There is currently no discussion for this recipe.

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