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?