有时候我可以选择使用CSS元素:hover或JavaScript onmouseover来控制页面上html元素的外观.考虑以下场景,其中div包装输入
当鼠标光标悬停在div上时,我希望输入改变背景颜色.CSS方法是
JavaScript的方法是
每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript慢于css吗？
问题:悬停是IE6仅在链接上支持它.这些天我用jQuery做这种事情:
$("div input").hover(function() {
$(this).addClass("blue");
}, function() {
$(this).removeClass("blue");
});
使事情变得更容易.这适用于IE6,FF,Chrome和Safari.
CSS一个更易于维护和阅读.
为什么不兼得？使用jQuery作为动画效果和CSS作为后备.这为您提供了优雅降级的jQuery的好处.
CSS:
a {color: blue;}
a:hover {color: red;}
jQuery(使用jQueryUI为颜色设置动画):
$('a').hover(
function() {
$(this)
.css('color','blue')
.animate({'color': 'red'}, 400);
},
function() {
$(this)
.animate({'color': 'blue'}, 400);
}
);
演示
在javascript中执行此操作的另一个好处是,您可以在不同的时间点添加/删除悬停效果 - 例如,将鼠标悬停在表格行上更改颜色,单击禁用悬停效果并开始编辑就地模式.
编辑:这个答案不再成立.CSS得到了很好的支持,Javascript(读取:JScript)现在几乎都需要任何Web体验,很少有人禁用javascript.
最初的答案,正如我在2009年的意见.
脱离我的头顶:
使用CSS,您可能会遇到浏览器支持问题.
使用JScript,人们可以禁用jscript(这就是我所做的).
我相信首选方法是使用HTML,使用CSS布局以及JScript中的任何动态内容.所以在这个例子中,你可能想要采用CSS方法.
在两者之间要记住另一个区别.使用CSS,当鼠标离开元素时,:hover状态始终处于停用状态.但是,使用JavaScript时,onmouseout当鼠标从元素移动到浏览器镶边而不是页面的其余部分时,不会触发事件.
这种情况比您想象的更频繁,尤其是当您使用自定义悬停状态在页面顶部创建导航栏时.
一个非常大的区别是当鼠标移出元素时,":悬停"状态会自动停用.因此,在悬停时应用的任何样式都会自动反转.另一方面,使用javascript方法,您必须定义"onmouseover"和"onmouseout"事件.如果您只定义"onmouseover",则除非您已明确定义"onmouseout",否则即使在鼠标移出后,"onmouseover"应用的样式也会保留.
京公网安备 11010802040832号 | 京ICP备19059560号-6 