CSS悬停与JavaScript鼠标悬停

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

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

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

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

<div><input></div>

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

输入{背景色：白色；}
div:hover输入{背景色：蓝色；}

JavaScript方法是

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

<div><input></div>

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

---

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

CSS one更易于维护和阅读。

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

hover的问题是IE6仅在链接上支持它。最近我使用jQuery来处理这类事情：

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

---

让事情变得容易多了。这将在IE6、FF、Chrome和Safari中起作用。

编辑：这个答案不再适用。CSS得到了很好的支持，Javascript（读：JScript）现在几乎是任何web体验所必需的，很少有人禁用Javascript

最初的答案，正如我在2009年的观点

不经意间：

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

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

---

我认为首选的方法是用HTML编写内容，用CSS进行布局，以及用JScript编写任何动态内容。因此，在本例中，您可能希望采用CSS方法。

如果您不需要100%支持禁用javascript的IE6，您可以使用类似IE条件注释的方法。然后使用css规则应用悬停效果。我不知道它是如何工作的，但它使用javascript使许多css规则正常工作，这在IE7和IE8中是不正常的。

在Regards to中，我总是使用插件，因为它不会触发事件，直到您在元素上暂停一小段时间。。。如果您不小心在鼠标上运行鼠标，或者只是在选择选项时，这将停止触发大量鼠标悬停事件。

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

为什么不能同时使用这两种模式？将jQuery用于动画效果，并将CSS用作后备方案。这为您提供了jQuery的好处

CSS:

jQuery（用于设置颜色动画）：

---

这两者之间还有另一个区别需要记住。使用CSS，当鼠标离开元素时，

：hover

状态始终处于禁用状态。但是，对于JavaScript，当鼠标离开元素移动到浏览器chrome上而不是页面的其余部分时，不会触发

onmouseout

事件

---

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

在Internet Explorer中，必须声明一个：悬停选择器才能在元素以外的其他元素上工作。

一个非常大的区别是：hover”当鼠标移出图元时，状态将自动停用。因此，应用于悬停的任何样式都将自动反转。

---

另一方面，使用javascript方法，必须同时定义“onmouseover”和“onmouseout”事件。如果您只定义了“onmouseover”，则应用于“onmouseover”的样式即使在鼠标移出后也将保持不变，除非您明确定义了“onmouseout”。

它是可维护的，直到您必须在非元素上支持IE6。然后这是一个痛苦，因为你必须使用JS黑客。但是CSS仍然是我首选的方式。让使用1999年浏览器的人有1999年的体验。人们应该更新这是最好的解决方案…我建议添加一个标签，检测浏览器，并告诉他们如果使用IE<7i进行了快速测试，则进行更新…显然IE7不支持div:hover？？是的，IE7对CSS2的支持率大约为50%。许多网页设计师无法忍受的部分原因是，有了这些尽可能多地滥用沙箱的追踪者、嗅探者和黑客，这是可以理解的。这并不是说它有助于防止跟踪，但人们试图让跟踪变得更困难是可以理解的。我知道有些人不允许吃饼干。他们也有充分的理由，看看firesheep。我仍然对你的答案投了赞成票，因为我希望人们能在2013年到来，意识到他们无论如何都会被跟踪，并启用我（我们？）最喜欢的玩具。我想知道metroui是否允许用户禁用javascript:p但说真的，chromeos、mozilla的操作系统、metroui都使用javascript。html5、css3、webgl和javascript将在几年内成为创建客户端应用程序的语言。耐心点，很快浏览器外就会有javascript，不再需要在浏览器中禁用它：）为什么要禁用javascript？你喜欢千年前的体验吗？因为这是一种安全风险，而且有太多的网站滥用javascript。我使用了一个名为“NoScript”的漂亮firefox插件，它有选择地让你只启用你想要的站点上的脚本。谢谢-这实际上回答了我想要的问题！-）对于CSS转换，我认为只有当：Hover应用于旧IE浏览器中的非锚定标记时，才应该使用javascript作为后备方法。我更新了演示，以引用当前版本的jQuery，所有这些都再次起作用。CSS方法不需要Javascript。我建议使用以下选项：hover:“Javascript比CSS慢吗？”你不会注意到这一点，但Javascript将消耗更多资源，如果许多其他脚本同时运行，则会减慢速度（尤其是手持设备和移动网站），这不是它应该用来做的