javascript - 使用Javascript DOM的CSS悬停

我很难找到解决此问题的方法：我试图使某些CSS元素（如border-color或a）在鼠标悬停时更改不同的颜色。我正在使用DOM逃脱iframe限制并在边界之外更改代码。到目前为止，这是我的代码：

<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",
        });
    });
});

例如，它说"border-color": "rgba(119, 94, 4, .75)",我希望它在悬停时更改颜色。

谢谢！

最佳答案

不太依赖于此的javascript。您可以在运行时使用要实现的所有规则将样式表添加到目标文档：

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

更新：

由于跨域限制，我正在努力在jsfiddle上重现此内容。通过将Working demo包含在自己的iframe中，another fiddle不受跨域限制的影响。