Question

i’m having a hard time finding a solution to this problem: I’m trying to make certain CSS elements like border-color or a change different colors on on mouseover. I’m using DOM to escape iframe limits and change code outside of the bounds. Here’s my code so far:

<script type="text/javascript">
window.parent.document.getElementById("screenshots").style.backgroundImage="url(bg.png)";
window.parent.document.getElementById("screenshots").style.color="#000";    
window.parent.document.getElementById("description_container").style.marginBottom="-4px";

$(window.parent.document.getElementById("screenshots")).children("a").each(function (i, o) {         
    $(o).children("img").each(function (i, img) {
        $(img).css({
        /*  "border": "5px", */
            "border-color": "rgba(119, 94, 4, .75)",
            "border-style": "solid",
            "border-radius": "10px",
            "opacity": "0.9",
        });
    });
});

For example where it says "border-color": "rgba(119, 94, 4, .75)", I would like it to change the color on hover.

Thanks!

Answer 1

Not a big fan of relying on javascript for this. You could add a stylesheet to the target document at runtime with all the rules you wish to implement:

$(window.parent.document.head).append('<style type="text/css">a:hover{color:red !important;}</style>');

Update:

I’m struggling to reproduce this on jsfiddle due to cross-domain limitations. Working demo is not affected by the crossdomain limitation by including another fiddle into its own iframe.