ZeroClipBoard forceHandCursor? Global config not working

Question

Hi I just started using ZeroClipBoard, so I am still acclimating myself with it. I have it working however I can not for the life of me get the hand cursor icon on hover of the elements. I am also getting an error in the console everytime i hover a clip element: Uncaught Error: Error calling method on NPObject.

Here is a link to the project: http://git-cheatsheet.com/

Here is my code:

ZeroClipboard.config({ forceHandCursor: true });
var client = new ZeroClipboard( gitSnip );

    client.on( "ready", function( readyEvent ) {
    client.on( "copy", function (event) {
      var clipboard = event.clipboardData;
      clipboard.setData( "text/plain" );
    });

    client.on( "aftercopy", function( event ) {

        $(".overlay").fadeIn().addClass('active');
        setTimeout(function(){
            $(".overlay").fadeOut().removeClass('active');
        },1200);
    });
});

Answer 1

To customise the button with CSS you can't use the usual pseudo-classes of :hover or :active you have to use the zeroclipboard sub-classes: .zeroclipboard-is-hover and .zeroclipboard-is-active . This is because you have the clear Flash element over the top which is blocking direct access to the underlying button.

d_clip_button.zeroclipboard-is-hover { background-color:#eee; }

d_clip_button.zeroclipboard-is-active { background-color:#aaa; }

See the zeroclipboard documentation in more detail under CSS Effects at https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

As to your error in the console check out this answer Uncaught Error: Error calling method on NPObject

Answer 2

This css worked for me with ZeroClipboard v2.1.6 :

 .zeroclipboard-is-hover { cursor:pointer; }