Question

有时我可以选择使用CSS元素：hover或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吗？

Answer 1

问题：悬停是IE6仅在链接上支持它。这些天我用jQuery来做这件事：

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

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

Answer 2

CSS更易于维护和阅读。

Answer 3

为什么不两者兼而有之？使用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

Answer 4

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

Answer 5

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

原始答案，正如我在2009年的意见。

脱离我的头顶：

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

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

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

Answer 6

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

这种情况比您想象的更频繁，尤其是当您使用自定义悬停状态在页面顶部创建导航栏时。

Answer 7

一个非常大的区别是＆＃34;：hover＆＃34;当鼠标移出元素时，状态会自动停用。因此，在悬停时应用的任何样式都会自动反转。另一方面，使用javascript方法，你必须定义＆＃34; onmouseover＆＃34;和＆＃34; onmouseout＆＃34;事件。如果你只定义＆＃34; onmouseover＆＃34;应用的样式＆＃34; onmouseover＆＃34;除非你明确定义＆＃34; onmouseout＆＃34;

，否则即使你鼠标移除也会坚持下去。

Answer 8

在Internet Explorer中，必须声明一个＆lt;！DOCTYPE＆gt; for：hover选择器用于处理除＆lt; a＆gt;之外的其他元素元件。

Answer 9

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

Answer 10

在using jQuery to do hover的调整中，我总是使用插件HoverIntent，因为它不会触发事件，直到你暂停一个元素短暂的时间...这会停止大量的如果您不小心将鼠标放在它们上面或仅仅是在选择选项时鼠标悬停在事件上。

Answer 11

如果您在禁用javascript时不需要100％支持IE6，则可以使用类似ie7-js的IE条件注释。然后你只需使用css规则来应用悬停效果。我不确切知道它是如何工作的，但是它使用javascript来制作很多css规则，通常在IE7和8中都没有。

CSS悬停与JavaScript鼠标悬停

11 个答案: