Page 1 of 1

Mootools - Get a element's hover CSS ??

Posted: Tue Feb 02, 2010 11:26 am
by infolock
I'm trying to get the CSS information for a given element's HOVER.

So I have tried this:

Code: Select all

 
var anchor_hover_link_info = $(document.body).getElement("a:hover").getStyles('font-size', 'text-decoration', 'color', 'padding', 'margin');
 
However, this does not work. Can anyone point me in the right direction? I'm not trying to alter the hover, rewrite it, or anything. I just want to know what the CSS properties is for an anchor's hover is on the page.

PS: when I say it doesn't work, i get the message "Error: $(document.body).getElement("a:hover") is null"

Re: Mootools - Get a element's hover CSS ??

Posted: Tue Feb 02, 2010 12:15 pm
by kaszu
Problem is that on a page there are no hovered items. You have 2 options:
1) Place a link over the page and when user hovers it read the style and remove that link
2) Extract the info from stylesheets

Here is code for 2) but it works only in non-ie browsers (i was lazy)

Code: Select all

function findStyle(str) {
    var linkstyle = {};
 
    for(var i=0, ii=document.styleSheets.length; i<ii; i++) {
        var rules = document.styleSheets[i].cssRules;
        for(var r=0, rr=rules.length; r<rr; r++) {
            if (rules[r].selectorText == str) {
                var style = rules[r].style;
                for(var s=0,ss=style.length; s<ss; s++) {
                    linkstyle[style[s]] = style.getPropertyValue(style[s]);
                }
            }
        }
    }
 
    return linkstyle;
}
Here on devnetwork.net it returns:

Code: Select all

{
    "color": "rgb(211, 17, 65)",
    "text-decoration": "underline"
}

Re: Mootools - Get a element's hover CSS ??

Posted: Tue Feb 02, 2010 12:45 pm
by infolock
Thanks I was afraid of that.