Search code examples
javascriptjquerycsshoverpseudo-class

Copy elements pseudo :hover styles using jQuery

I am using Twitter Bootstrap and the uploadify library.

I have got the button uploadify creates styled using buttonClass: 'btn btn-primary' and I resize the object (which does not take into account padding etc by itself) using:

var uploader = $('#document_upload_'+variant_id);
var button = $('.uploadify-button', uploader);
var swfobject = $('object', uploader);

swfobject.css({
    height: button.outerHeight(),
    width: button.outerWidth()
});

Which all works great, the only problem is that we lose the hover styles on the button.) So, we need to style the button using it's hover styles when the object is hovered over.

I am aware that the below won't work:

swfobject.hover(
    function(){button.mouseover();}, 
    function(){button.mouseleave()}
);

But as this is being used in a general setting, where all the sites are using bootstrap, but they are styled differently (and I cannot modify the core bootstrap files) I cannot simply apply another class, that has the same as the hover pseudo classes.

So, is there a way in jQuery to copy an elements "hover styles"?

Solution

  • Is there a way in jQuery to copy an elements "hover styles"?

    Not easily. You could listen to jQuery.hover() and use jQuery.css() to get the custom CSS, iterate over styles in document.styleSheets or you could try a library like jss:

    jss('.button:hover').get()['color']

    JSS JSFiddle: http://jsfiddle.net/7kEJ9/2/