javascript - 使用 Javascript DOM 的 CSS 悬停

Question

我很难找到这个问题的解决方案:我正在尝试使某些 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)", 我希望它在悬停时更改颜色。

谢谢!

Answer 1

不太喜欢为此依赖 javascript。您可以在运行时向目标文档添加一个样式表，其中包含您希望实现的所有规则:

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

更新:

由于跨域限制，我很难在 jsfiddle 上重现它。 Working demo通过包含 another fiddle 不受跨域限制的影响进入它自己的 iframe。