CSS悬停与JavaScript鼠标悬停

Question

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

Answer 1

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

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

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