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屋!