CSS 鼠标悬停与 JavaScript 鼠标悬停

有时候，我需要在使用 CSS 元素: hover 或 JavaScript onmouseover 来控制页面上 html 元素的外观之间做出选择。考虑下面的场景，其中 div 包装输入

<div>
<input id="input">
</div>

我希望输入在鼠标悬停在 div 上时改变背景颜色

<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 方法在大多数网页浏览器中都能很好地工作吗？JavaScript 比 css 慢吗？

252366 次浏览
小开

The CSS one is much more maintainable and readable.

小开

Use CSS, it makes for much easier management of the style itself.

小开
最佳答案

The problem with :hover is that IE6 only supports it on links. I use jQuery for this kind of thing these days:

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

Makes things a lot easier. That'll work in IE6, FF, Chrome and Safari.

小开

EDIT: This answer no longer holds true. CSS is well supportedand Javascript (read: JScript) is now pretty much required for any web experience, and few folks disable javascript.

The original answer, as my opinion in 2009.

Off the top of my head:

With CSS, you may have issues with browser support.

With JScript, people can disable jscript (thats what I do).

I believe the preferred method is to do content in HTML, Layout with CSS, and anything dynamic in JScript. So in this instance, you would probably want to take the CSS approach.

小开

If you don't need 100% support for IE6 with javascript disabled you could use something like ie7-js with IE conditional comments. Then you just use css rules to apply hover effects. I don't know exactly how it works but it uses javascript to make a lot of css rules work that don't normally in IE7 and 8.

小开

In reguards to using jQuery to do hover, I always use the plugin HoverIntent as it doesn't fire the event until you pause over an element for brief period of time... this stops firing off lots of mouse over events if you accidentally run the mouse over them or simply whilst choosing an option.

小开

One additional benefit to doing it in javascript is you can add / remove the hover effect at different points in time - e.g. hover over table rows changes color, click disables the hover effect and starts edit in place mode.

小开

Why not both? Use jQuery for animated effects and CSS as the fallback. This gives you the benefits of jQuery with graceful degradation.

CSS:

a {color: blue;}
a:hover {color: red;}

jQuery (uses jQueryUI to animate color):

$('a').hover(
function() {
$(this)
.css('color','blue')
.animate({'color': 'red'}, 400);
},
function() {
$(this)
.animate({'color': 'blue'}, 400);
}
);

demo

小开

There is another difference to keep in mind between the two. With CSS, the :hover state is always deactivated when the mouse moves off an element. However, with JavaScript, the onmouseout event is not fired when the mouse moves off the element onto browser chrome rather than onto the rest of the page.

This happens more often than you might think, especially when you're making a navbar at the top of your page with custom hover states.

小开

In Internet Explorer, there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.

小开

A very big difference is that ":hover" state is automatically deactivated when the mouse moves out of the element. As a result any styles that are applied on hover are automatically reversed. On the other hand, with the javascript approach, you would have to define both "onmouseover" and "onmouseout" events. If you only define "onmouseover" the styles that are applied "onmouseover" will persist even after you mouse out unless you have explicitly defined "onmouseout".


提交答案