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

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

有什么建议可以这样做吗

谢谢

---

TC

您可以尝试使用jQuery，这将使它变得更加简单$css（'hover'，function（index）{whatever；}）

如果你不喜欢这样，请告诉我，我可以在straight js中绞尽脑汁解决问题。
当然可以单独使用CSS来解决这个问题：

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

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

我认为使用javascript来完成这项任务是过分的。您可以使用
：hover
伪选择器执行一些非常复杂的操作。考虑这个标记（和CSS）：

我只是一个div我只是一个h1

如您所见，我们可以在上面的规则中使用
：hover
选择器，不仅可以设置悬停元素的样式，还可以设置任何子元素的样式。这个前提是，很多“飞出”导航都是通过嵌套的
ul
s来实现的。
你当然可以

你可以这样做：

jQuery:

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

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

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

标准javascript:

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

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

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

HTML:

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

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

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

悬停
div:hover不是100%跨浏览器兼容我想你的说法应该是“div:hover不是100%跨浏览器兼容的。”这是真的。IE 6不喜欢
：默认情况下，将
悬停在
a
标记之外的任何位置。如果需要IE 6支持，请查看。此脚本将允许在任何元素（以及许多其他元素）上使用
：hover
。@truenorth除了IE6之外，还有其他浏览器不能处理它吗？有关
：hover
兼容性，请参阅。所有其他浏览器都支持上述技术。部分支持
：active
伪选择器，完全支持
：hover
（如我提供的链接所示）