使用 Javascript 按钮切换 CSS 悬停元素答案

【问题标题】：Toggle CSS hover element with a Javascript button使用 Javascript 按钮切换 CSS 悬停元素
【发布时间】：2011-07-02 10:52:16
【问题描述】：

是否可以使用 Javascript 来切换悬停时更改的元素。我想构建一个按钮，允许 div 从两种不同的状态进行更改：（1）当 div 未悬停时和（2）当 div 悬停时。

有什么建议可以做到吗？

谢谢！

【问题讨论】：

标签： javascript html css hover

【解决方案1】：

<input type = 'button' value = 'change div' onmouseover = 'javascript:getElementById('DivId').className = newStyleClass' onmouseout = 'javascript:getElementById('DivId').className = newStyleClass' />

【讨论】：

【解决方案2】：

您可以尝试使用 jQuery，它会更容易。 $('#divId').css('hover', function(index){ 不管什么; });

如果您不喜欢，请告诉我，我可以绞尽脑汁思考如何用直接的 js 做到这一点。

【讨论】：

【解决方案3】：

当然可以单独使用 CSS：

div { background-color:#000; }
div:hover { background-color:#cc0000; }

当您将鼠标悬停在div 上时，背景颜色将从黑色变为红色。

我认为使用 javascript 来完成这项任务是多余的。你可以用:hover 伪选择器做一些非常复杂的事情。考虑这个标记（和 CSS）：

<div>I'm just a div <h1>I'm just an h1</h1></div>

div h1 { font-size:10px; font-weight:normal; }
div:hover { border:1px dotted #000; }
div:hover h1 { font-size:32px; font-weight:bold; color:#cc0000; }

如您所见，我们可以在上述规则中使用:hover 选择器，不仅可以设置悬停元素的样式，还可以设置任何子元素的样式。这个前提是大量的“飞出”导航是如何用嵌套的uls 来制作的。

【讨论】：

div:hover 不是 100% 跨浏览器兼容
我想你的陈述应该是“div:hover 不是 100% 跨浏览器兼容”。这是真实的。默认情况下，IE 6 不喜欢 :hover 除了a 标签。如果需要 IE 6 支持，请查看code.google.com/p/ie7-js。该脚本将允许在任何元素上使用:hover（以及许多其他内容）。
@truenorth 除了IE6还有其他浏览器不能处理吗？
请参阅quirksmode.org/css/contents.html#t16 了解:hover 的兼容性。所有其他浏览器都支持我上面说明的技术。
部分支持:active 伪选择器，完全支持:hover（正如我提供的链接上所说）

【解决方案4】：

你当然可以！

你可以这样做：

jQuery：

$("#mydiv").hover(function () 
{
    $(this).toggleClass("active");
    // or $(this).toggle();
  }
);

标准 javascript：

function toggle(obj)
{
    var item = document.getElementById(obj);
    if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }
    else { item.style.visibility = 'visible'; }
}

HTML：

<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');" id="mydiv">Hover</div>

【讨论】：