使用 Javascript DOM 的 CSS 悬停答案

【问题标题】：CSS hover using Javascript DOM使用 Javascript DOM 的 CSS 悬停
【发布时间】：2012-08-15 06:09:54
【问题描述】：

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

谢谢！

【问题讨论】：

在 jQuery 中使用 .hover(function(){}, function(){})，对于 JavaScript，使用 onmouseover()
感谢您的快速回复！我对如何在我的代码中实现它感到困惑。你能进一步解释一下我在这种情况下如何使用 jQuery 吗？

标签： javascript jquery html css dom

【解决方案1】：

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

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

更新：

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

【讨论】：

感谢您的回复。此 javascript 代码位于 HTML 文档本身中。我仍然可以在当前代码中使用标记内的该代码吗？另外，如何使用 document.head 帮助？
@Sosa：是的，这不是问题；如果您使用 jQuery，请记住添加代码以仅在 domready 上触发。上面的最终选择器查找起来更便宜，但我敢肯定原来的选择器也能正常工作。
非常感谢！这是我添加的行$(window.parent.document.head).append('<style type="text/css">img:hover{border-color:#D81717 !important;}</style>');。

【解决方案2】：

就像 Eric Yin 提到的：

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

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

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

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

【讨论】：

【解决方案3】：

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

这是a fiddle for jQuery solution 几乎直接来自the jQuery docs。

代码：

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

【讨论】：