CSS悬停与JavaScript鼠标悬停

有时候，我可以选择使用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慢吗？

：hover的问题是IE6仅在链接上支持它。最近，我将jQuery用于此类事情：

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

使事情变得容易得多。可以在IE6，FF，Chrome和Safari中使用。

CSS之一更具可维护性和可读性。

为什么不兼得？使用jQuery制作动画效果，并使用CSS作为后备。这为您带来了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);
  }
);

演示

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

很大的不同是，当鼠标移出元素时，“：hover”状态会自动停用。结果，应用于悬停的任何样式都会自动反转。另一方面，使用javascript方法，您必须定义“ onmouseover”和“ onmouseout”事件。如果仅定义“ onmouseover”，则除非您明确定义了“ onmouseout”，否则即使您将鼠标移出，应用的“ onmouseover”样式也将保留。

编辑：这个答案不再成立。CSS得到了很好的支持，现在任何网络体验都非常需要Javascript（阅读：JScript），并且很少有人禁用JavaScript。

原始答案是我2009年的观点。

从我的头顶上：

使用CSS，可能对浏览器的支持有疑问。

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

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

两者之间要记住另一个差异。使用CSS，当鼠标移离某个元素时，:hover状态始终处于禁用状态。但是，使用JavaScript，onmouseout当鼠标从元素移到浏览器镶边而不是页面其余部分时，不会触发该事件。

这种情况比您想象的要经常发生，尤其是当您使用自定义悬停状态在页面顶部制作导航栏时。

在Internet Explorer中，必须声明一个<！DOCTYPE>，以便：hover选择器可用于除<a>元素之外的其他元素。

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

为了防止使用jQuery进行悬停，我始终使用插件HoverIntent，因为它不会触发事件，直到您将元素暂停一小段时间...如果您不小心运行了，这会停止触发大量的鼠标悬停事件将鼠标悬停在它们上方或只是在选择一个选项时。

如果您不需要在禁用javascript的情况下对IE6的100％支持，则可以使用带有IE条件注释的ie7-js之类的东西。然后，您只需使用CSS规则来应用悬停效果。我不知道它是如何工作的，但是它使用javascript来使很多CSS规则正常工作，而这些规则在IE7和8中通常是不起作用的。