Created by: altano
I am trying to use ZeroClipboard on top of a bootstrap button. ZeroClipboard overlays a flash movie on top of the button to enable copy-to-clipboard functionality.
The problem is that there is currently no clean way to cause the hover/active states to be reflected on the bootstrap button below the flash movie.
There is no way for ZeroClipboard to programmatically set the actual :active/:hover pseudo classes on the DOM button when the user mouses over or clicks on the flash movie, so it allows you to set a custom class that it will set on the DOM button instead. Since there is no class for the hover state, unlike the active state, I cannot use this functionality.
I could theoretically use less to make this easy as well, by defining my own classes outside of bootstrap, like so:
.btn.hover { .btn:hover; }
But unfortunately, less does not allow you to mixin pseudo-classes and this generates a syntax error.
The solution is to add a .hover and .focus class to bootstrap's .btn, just like :active already has an equivalent .active class.