CSS hover using Javascript DOM

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.

Answer 2

Like Eric Yin has mentioned:

you can bind a mouseover event to aa specific element or declare it with your element in the html. In this same loop for every element you loop over bind a onmouseover event to each a element. This syntax is rather confusing, or I'm just not as used to jQuery. Mind I say I hope you are doing this as an exercise because setting styles in js is not a good way to approach this. It would be something like this?

$(img).onmouseover = function() { 
    this.css( {
        "border-color": "rgba(119, 94, 4, .75)"
    });
};

jQuery .hover is probably a better choice since you can bind 2 functions to toggle between. With this you would probably need to also bind a onmouseout to reset the border.

Honestly using css :hover class is the best and most efficient solution.

Answer 3

EDIT: Edited the fiddle (and the code below). Class defines if the element is to changed or not.

Here's a fiddle for jQuery solution almost straight out from the jQuery docs .

The code:

$(".change").hover(function () {
  $(this).css({
    "border-color": "rgba(88, 44, 4, .75)",
    "border-radius": "10px",
    "opacity": "0.5"});
  }, function () {
var cssObj = {
    "border": "5px",
    "border-color": "rgba(119, 94, 4, .75)",
    "border-style": "solid",
    "border-radius": "10px",
    "opacity": "0.9"
}
  $(this).css(cssObj);
});

​​