使用Javascript按钮切换CSS hover元素

Question

是否可以使用Javascript来切换一个在鼠标悬停时发生变化的元素。我想建立一个按钮，允许div从两种不同状态之间进行切换：(1)当div没有被悬停时和(2)当div被悬停时。

有什么建议吗？

谢谢！

TC

- TronCraze

Answer 1

使用CSS就可以实现这个功能：

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

当你将鼠标悬停在

上时，背景颜色将从黑色变为红色。

我认为使用JavaScript完成此任务有些过度。您可以使用:hover伪类选择器执行一些相当复杂的操作。请考虑以下标记（和CSS）：

我只是一个div

我只是一个h1

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选择器来不仅样式化悬停元素，还可以样式化任何子元素。这个前提是许多“飞出”导航只需要嵌套的ul就可以实现的基础。

- Nathan Anderson

---

div:hover不是100%跨浏览器兼容的。 - TNC

我想你的陈述应该是“div:hover不是100％跨浏览器兼容的。” 这是真的。默认情况下，IE 6不喜欢除a标签之外的任何东西上的:hover。 如果需要支持IE 6，请查看http://code.google.com/p/ie7-js/。此脚本将使任何元素（以及许多其他内容）可以使用`:hover`。 - Nathan Anderson

@truenorth 除了 IE6，还有其他浏览器无法处理它吗？ - ClosureCowboy

请查看http://www.quirksmode.org/css/contents.html#t16 了解:hover的兼容性问题。所有其他浏览器都支持我上面介绍的技术。 - Nathan Anderson

@ClosureCowboy，除了Nathan提供的链接外，IE6不支持在div上使用它，而IE7只有部分支持，因为CSS2在首次发布时并没有得到完全支持，这是很遗憾的。 - TNC

部分支持是针对:active伪选择器的，:hover则完全支持（正如我提供的链接所述）。 - Nathan Anderson

Answer 2

你当然可以！你可以这样做：

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>

- TNC

Answer 3

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

的翻译内容如下：

- sarath

Answer 4

你可以尝试使用jQuery，它会让这个过程变得更加容易。$('#divId').css('hover', function(index){ 一些操作 ; });

如果你不喜欢这种方法，请告诉我，我可以想想如何用纯JS实现。

- richsoni