CSS悬停与JavaScript鼠标悬停

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作为后备.这为您提供了优雅降级的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);
  }
);

演示

Answer 4

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

Answer 5

编辑:这个答案不再成立.CSS得到了很好的支持,Javascript(读取:JScript)现在几乎都需要任何Web体验,很少有人禁用javascript.

最初的答案,正如我在2009年的意见.

脱离我的头顶:

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

使用JScript,人们可以禁用jscript(这就是我所做的).

我相信首选方法是使用HTML,使用CSS布局以及JScript中的任何动态内容.所以在这个例子中,你可能想要采用CSS方法.

Answer 6

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

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

Answer 7

一个非常大的区别是当鼠标移出元素时,":悬停"状态会自动停用.因此,在悬停时应用的任何样式都会自动反转.另一方面,使用javascript方法,您必须定义"onmouseover"和"onmouseout"事件.如果您只定义"onmouseover",则除非您已明确定义"onmouseout",否则即使在鼠标移出后,"onmouseover"应用的样式也会保留.