1

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?

panthro
  • 19,109
  • 50
  • 152
  • 271
  • Please show me where this has been asked before @cimmanon – panthro Oct 16 '14 at 15:13
  • Selecting parent elements is a common CSS question. Yours is a bit unique as you get an extra class from a plugin, but the idea of parent selectors is commonly asked. – geebru Oct 16 '14 at 15:56

1 Answers1

1

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.

geebru
  • 141
  • 7