CSShover与JavaScript的鼠标hover
有时候我可以select使用CSS元素：hover或JavaScript onmouseover来控制页面上html元素的外观。 考虑下面的情况，一个div包装input
<div> <input id="input"> </div> 当鼠标光标hover在div上时，我想让input改变背景颜色。 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慢吗？
问题是：hoverIE6只支持链接。 我最近使用jQuery来处理这种事情：
$("div input").hover(function() { $(this).addClass("blue"); }, function() { $(this).removeClass("blue"); });
使事情变得更容易。 这将在IE6，FF，Chrome和Safari的工作。
CSS一个更易于维护和阅读。
在javascript中做这个额外的好处是你可以在不同的时间点添加/删除hover效果 – 例如，将鼠标hover在表格行上改变颜色，点击禁用hover效果，并开始编辑模式。
为什么不兼得？ 使用jQuery的animation效果和CSS作为后备。 这给你带来优雅退化的jQuery的好处。
CSS：
a {color: blue;} a:hover {color: red;}
jQuery（使用jQueryUIanimation颜色）：
$('a').hover( function() { $(this) .css('color','blue') .animate({'color': 'red'}, 400); }, function() { $(this) .animate({'color': 'blue'}, 400); } );
演示
CSS方法不需要Javascript。
在这两者之间要记住另一个区别。 使用CSS，当鼠标离开某个元素时， :hover状态总是处于停用状态。 但是，使用JavaScript，当鼠标移动到浏览器chrome而不是页面的其余部分时， onmouseout事件不会被触发。
这种情况发生得比你想象的要多，尤其是当你用自定义hover状态在页面顶部制作一个导航栏的时候。
一个非常大的区别是当鼠标移出元素时，“：hover”状态会自动停用。 因此，hover时应用的任何样式都会自动反转。 另一方面，用JavaScript方法，你将不得不定义“onmouseover”和“onmouseout”事件。 如果只定义了“onmouseover”，那么即使在鼠标hover之后，应用“onmouseover”的样式也会一直存在，除非您明确定义了“onmouseout”。
编辑：这个答案不再成立。 CSS是很好的支持和JavaScript（阅读：JScript）现在几乎所有的networking体验都需要，很less有人禁用JavaScript。
原来的答案，就像我2009年的意见。
closures我的头顶上：
使用CSS，您可能会遇到浏览器支持方面的问题。
使用JScript，人们可以禁用jscript（这就是我所做的）。
我相信首选的方法是在HTML中执行内容，使用CSS进行布局以及在JScript中执行任何动作。 所以在这个例子中，你可能会想采取CSS方法。
在Internet Explorer中，必须为hoverselect器声明一个<！DOCTYPE>，以处理除<a>元素之外的其他元素。
使用CSS，它使风格本身更容易pipe理。
在使用jQuery进行hover的规则中 ，我总是使用插件HoverIntent，因为它不会触发事件，直到您在短时间内暂停某个元素为止……如果您意外运行，停止触发大量鼠标hover事件把鼠标放在他们身上，或者干脆select一个选项。
我会build议使用无论：hover ： http ://www.xs4all.nl/~peterned/csshover.html
如果你不需要100％支持IE6禁用JavaScript，你可以使用ie7-js与IE条件注释。 然后，您只需使用CSS规则来应用hover效果。 我不知道它是如何工作的，但它使用javascript来制作大量的通常不在IE7和8中的CSS规则。
