1

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

谢谢！

4

3 回答 3

1

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

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

更新：

由于跨域限制，我正在努力在 jsfiddle 上重现这一点。 通过在自己的 iframe 中包含另一个小提琴，工作演示不受跨域限制的影响。

于 2012-08-14T07:19:31.417 回答
0

就像 Eric Yin 提到的：

您可以将鼠标悬停事件绑定到特定元素或在 html 中使用您的元素声明它。在每个元素的相同循环中，您循环将 onmouseover 事件绑定到每个元素。这种语法相当混乱，或者我只是不习惯 jQuery。请注意，我希望您将其作为练习进行，因为在 js 中设置样式并不是解决此问题的好方法。会是这样吗？

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

jQuery .hover 可能是更好的选择，因为您可以绑定 2 个函数来切换。有了这个，你可能还需要绑定一个 onmouseout 来重置边框。

诚实地使用 css :hover 类是最好和最有效的解决方案。

于 2012-08-14T08:18:50.410 回答
-1

编辑：编辑了小提琴（和下面的代码）。类定义是否要更改元素。

这是几乎直接来自jQuery 文档的 jQuery 解决方案的小提琴。

编码：

$(".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);
});

​​</p>

于 2012-08-14T08:02:37.930 回答