javascript - 使用 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像上面这样的规则中的选择器不仅可以设置悬停元素的样式，还可以设置所有子元素的样式。这个前提是许多“飞出”导航是如何用嵌套的 ul 制作的。