css hover vs. javascript mouseover [英] css hover vs. javascript mouseover

问题描述

有时候，我可以选择使用css元素：hover或javascript onmouseover来控制页面上的html元素的外观。考虑下面的情况，其中DIV包装INPUT

There are times when I have a choice between using a css element:hover or javascript onmouseover to control the appearance of html elements on a page. Consider the following scenario where a DIV wraps an INPUT

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

当鼠标光标悬停在div上时，我希望输入更改背景颜色。 CSS方法是

I want the input to change background color when the mouse cursor hovers over the div. The CSS approach is

<style>
input {background-color:White;}
div:hover input {background-color:Blue;}
</style>
<div><input></div>

javascript方法是

The javascript approach is

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

每种方法的优点和缺点是什么？ CSS方法对大多数网络浏览器工作得很好吗？是javascript比css慢吗？

What are the advantages and disadvantages of each approach? Does the CSS approach work well with most web browsers? Is javascript slower than css?

推荐答案

问题：hover是IE6只支持链接。我使用jQuery这些天这样的事情：

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");
});

使事情更容易。这将工作在IE6，FF，Chrome和Safari。

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

这篇关于css hover vs. javascript mouseover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！