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

Question

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

任何建议如何做到这一点？

谢谢！

技术委员会

Answer 1

单独使用 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 完成的。