CSS悬停与JavaScript鼠标悬停[关闭]答案

【问题标题】：CSS hover vs. JavaScript mouseover [closed]CSS悬停与JavaScript鼠标悬停[关闭]
【发布时间】：2010-10-11 03:53:47
【问题描述】：

有时我可以选择使用 CSS 元素：悬停或 JavaScript onmouseover 来控制页面上 html 元素的外观。考虑以下 div 包装输入的场景

<div>
<input id="input">
</div>

当鼠标光标悬停在 div 上时，我希望输入更改背景颜色。 CSS方法是

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

JavaScript 方法是

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

每种方法的优缺点是什么？ CSS 方法是否适用于大多数 Web 浏览器？ JavaScript 比 CSS 慢吗？

【问题讨论】：

CSS 方法不需要 Javascript。
我建议使用 Whatever:hover ：http://www.xs4all.nl/~peterned/csshover.html
"javascript 比 css 慢吗？"您不会注意到它，但是如果同时运行许多其他脚本（尤其是手持设备、移动网站），javascript 会消耗更多资源并且会减慢速度，这不是它应该用于的用途。另一方面，CSS 使用较少的资源，并且仅用于演示。您应该只使用 javascript 来增强网站导航和功能，但对于未启用 js 的用户来说，它应该仍然可以导航。我建议使用 CSS :hover 方法。
这是一个老问题，因此上述评论不再有效并不奇怪，而且可能永远不会有效。原因之一是缺乏提供高性能样板的优秀 JS 库（参见 Famo.us）。另一个是现代浏览器中的 JS 引擎，无论是桌面浏览器还是移动浏览器，都非常快。有一个基准测量它的性能是本机 C 编译代码的 80%。当然也有例外的情况，但是 JS 在浏览器中令人印象深刻的性能仍然存在。人们真正的“意思”是 DOM 很慢。 JS 相当快，他们只是没有意识到这一点。

标签： javascript css

【解决方案1】：

:hover 的问题在于 IE6 仅在链接上支持它。这些天我用 jQuery 做这种事情：

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

让事情变得更容易。这适用于 IE6、FF、Chrome 和 Safari。

【讨论】：

我做了一个快速测试...显然 IE7 不支持 div:hover??
是的，IE7 对 CSS2 有 50% 的支持。许多网页设计师无法忍受的部分原因。
但是对于那些尽可能多地滥用沙盒的跟踪器、嗅探器和黑客来说，这是可以理解的。并不是说它有助于防止跟踪，而是人们试图让它变得更难是可以理解的。我认识不允许使用 cookie 的人。他们也有正当的理由，看看firesheep。我仍然赞成你的回答，因为我希望人们能在 2013 年到达，意识到他们无论如何都会被跟踪并启用我（我们的？）最喜欢的玩具。
我想知道 metroui 是否允许用户禁用 javascript :p 但说真的，chromeos、mozilla 的操作系统、metroui 都使用 javascript。 html5、css3、webgl 和 javascript 将在几年内成为创建客户端应用程序的语言。请耐心等待，很快就会有浏览器之外的 javascript，不再需要在浏览器中禁用它了 :)

【解决方案2】：

CSS 更易于维护和阅读。

【讨论】：

它是可维护的，直到您必须在非元素上支持 IE6。然后很痛苦，因为您必须使用 JS-hack。但是 CSS 仍然是我的首选方式。让使用 1999 年浏览器的人有 1999 年的体验。
人们应该更新这是最好的解决方案...我建议添加一个标签来检测浏览器并告诉他们如果使用 IE 进行更新
为什么css解决方案更易维护和可读？

【解决方案3】：

在 javascript 中执行此操作的另一个好处是您可以在不同的时间点添加/删除悬停效果 - 例如将鼠标悬停在表格行上会改变颜色，单击禁用悬停效果并开始在原地编辑。

【讨论】：

【解决方案4】：

为什么不两者兼而有之？使用 jQuery 作为动画效果和 CSS 作为后备。这为您提供了带有 graceful degradation 的 jQuery 的好处。

CSS：

a {color: blue;}
a:hover {color: red;}

jQuery（使用jQueryUI 为颜色设置动画）：

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

demo

【讨论】：

对于 CSS 过渡，我认为你应该只在 :Hover 应用于旧版 IE 浏览器中的非锚标记时使用 javascript 作为后备。
jsbin 的一些更改导致演示无法运行。我更新了演示以引用当前版本的 jQuery，并且一切都可以再次运行。

【解决方案5】：

两者之间还有一个区别需要牢记。使用 CSS，:hover 状态在鼠标移离元素时始终停用。但是，在 JavaScript 中，当鼠标从元素移到浏览器 chrome 而不是页面的其余部分时，不会触发 onmouseout 事件。

这种情况发生的频率比您想象的要高，尤其是当您在页面顶部创建带有自定义悬停状态的导航栏时。

【讨论】：

【解决方案6】：

一个很大的区别是当鼠标移出元素时，“:hover”状态会自动失效。因此，在悬停时应用的任何样式都会自动反转。另一方面，使用 javascript 方法，您必须同时定义“onmouseover”和“onmouseout”事件。如果您只定义“onmouseover”，则应用“onmouseover”的样式即使在您将鼠标移出后仍将保留，除非您已明确定义“onmouseout”。

【讨论】：

【解决方案7】：

编辑：这个答案不再适用。 CSS 得到了很好的支持，并且现在几乎所有 Web 体验都需要 Javascript（阅读：JScript），而且很少有人禁用 javascript。

最初的答案，我在 2009 年的看法。

在我的头顶上：

使用 CSS，您可能会遇到浏览器支持方面的问题。

使用 JScript，人们可以禁用 jscript（我就是这样做的）。

我相信首选的方法是在 HTML 中制作内容、使用 CSS 布局以及在 JScript 中进行任何动态处理。因此，在这种情况下，您可能希望采用 CSS 方法。

【讨论】：

为什么要禁用 javascript？你喜欢千禧年前的体验吗？
因为它存在安全风险，而且有太多网站滥用 javascript。我使用了一个漂亮的 firefox 插件，叫做“NoScript”，它有选择地让你只启用你想要的站点的脚本。

【解决方案8】：

在 Internet Explorer 中，必须为 :hover 选择器声明一个才能作用于元素以外的其他元素。

【讨论】：

【解决方案9】：

使用 CSS，它可以更轻松地管理样式本身。

【讨论】：

【解决方案10】：

为了提醒using jQuery to do hover，我总是使用插件HoverIntent，因为它不会触发事件，直到您在一个元素上暂停一小段时间......这会停止触发大量鼠标悬停事件，如果您不小心将鼠标移到它们上面，或者只是在选择一个选项时。

【讨论】：

【解决方案11】：

如果您不需要 100% 支持禁用 javascript 的 IE6，您可以使用 ie7-js 之类的东西和 IE 条件 cmets。然后您只需使用 css 规则来应用悬停效果。我不确切知道它是如何工作的，但它使用 javascript 来制作很多在 IE7 和 8 中通常不会正常工作的 css 规则。

【讨论】：