CSS悬停与JavaScript mouseover

有时候，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑下面的情况，其中一个div包装输入CSS悬停与JavaScript mouseover

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

我希望输入更改背景颜色，当鼠标光标悬停在div上。 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慢吗？

来源

2009-03-04 John

“javascript比css慢吗？”您不会注意到它，但是如果许多其他脚本同时运行（特别是对于手持设备，移动网站而言），JavaScript将消耗更多资源，并且可能会降低速度，并且这不是它应该使用的。另一方面，CSS使用更少的资源，并且完全是为了演示。您应该只使用JavaScript来增强网站导航和功能，但对于未启用js的用户应该仍然可以导航。我建议使用CSS：悬停方法。 – 2011-07-18 15:24:59

这是一个古老的问题，所以上述评论不再有效并不奇怪，而且可能永远不会有效。其中一个原因是缺乏可提供高性能样板的JS库（请参阅Famo.us）。另一个是现代浏览器中的JS引擎，无论是台式机还是手机，都非常快。有一个基准测量它的本机C编译代码的性能的80％。当然也有例外情况，但JS在浏览器中的令人印象深刻的性能仍然存在。人们真正的“意思”是DOM很慢。 JS非常快，他们从来没有意识到它。 – pmont 2015-03-09 20:55:35

问题在于：悬停是IE6只在链接上支持它。我最近使用jQuery来做这种事情：

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

让事情变得容易很多。这将在IE6，FF，Chrome和Safari中起作用。

来源

2009-03-04 00:18:18 cletus

我做了一个快速测试...显然IE7不支持div：悬停？？ – John 2009-03-04 00:35:57

是的，IE7对CSS2有50％的支持。许多网页设计师无法忍受的部分原因。 – Alan 2009-03-04 00:39:06

CSS之一更易于维护和阅读。

来源

2009-03-04 00:17:46

+14

它是可维护的，直到你必须在非元素上支持IE6。然后这是一个痛苦，因为你必须使用JS-hack。但CSS仍然是我首选的方式。让使用1999年浏览器的人有1999年的经验。 – Tyson 2009-03-04 00:22:12

人们应该更新这是最好的解决方案...我会建议添加一个标签，检测浏览器，并告诉他们更新，如果使用IE <7 – 2011-08-04 14:25:34

该CSS方法不需要JavaScript。

来源

2009-03-04 00:17:46

使用CSS，它使风格本身更容易管理。

来源

2009-03-04 00:18:06

编辑：这个答案不再成立。 CSS得到了很好的支持，Javascript（阅读：JScript）现在对于任何Web体验都是非常必要的，而且很少有人禁用JavaScript。

原来的答案，因为我在2009年

关闭我的头顶意见：

使用CSS，你可能有浏览器的支持问题。

使用JScript，人们可以禁用jscript（即我所做的）。

我相信首选的方法是在HTML中执行内容，使用CSS进行布局以及在JScript中动态执行任何操作。所以在这个例子中，你可能想要采用CSS方法。

来源

2009-03-04 00:19:11 Alan

我会建议使用无论在：hover：http://www.xs4all.nl/~peterned/csshover.html

来源

2009-03-04 00:48:25 cheeaun

如果您不需要为IE6 100％的支持与禁用，您可以使用类似ie7-js与IE条件注释的JavaScript。然后你只需使用CSS规则来应用悬停效果。我不知道它是如何工作的，但它使用javascript来制作很多css规则，通常不会在IE7和8中工作。

来源

2009-03-04 00:58:27 Annan

在using jQuery to do hover的调整中，我总是使用插件HoverIntent，不要触发该事件，直到您在短时间内暂停某个元素为止......如果您不小心将鼠标移到其上或仅在选择某个选项时停止触发大量鼠标悬停事件。

来源

2009-03-04 01:14:04 alex

在javascript中执行此操作的另一个好处是可以在不同时间点添加/移除悬停效果 - 例如，将鼠标悬停在表格行上更改颜色，单击禁用悬停效果并开始编辑。

来源

2010-04-27 20:20:08

为什么不是两个？将jQuery用于动画效果和CSS作为后备。这为您提供了带有graceful degradation的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); 
    } 
);

demo

来源

2010-07-18 15:42:38 kingjeffrey

还有一个区别牢记两者之间。使用CSS时，:hover状态为总是当鼠标移出元素时取消激活。但是，对于JavaScript，当鼠标移动到浏览器chrome而不是页面的其余部分时，触发事件不会被触发。

发生这种情况的频率比您想象的要多，尤其是当您使用自定义悬停状态在页面顶部制作导航栏时。

来源

2011-02-11 22:08:02 thismax

在Internet Explorer中，必须声明一个<！DOCTYPE>：hover选择器可以处理除<之外的其他元素。

来源

2011-03-03 12:50:15

一个非常大的差异是当鼠标移出元素时，“：hover”状态会自动停用。因此，悬停时应用的所有样式都会自动反转。另一方面，使用JavaScript方法，您将不得不定义“onmouseover”和“onmouseout”事件。如果仅定义“onmouseover”，则应用“onmouseover”的样式即使在您将鼠标移出后仍会保留，除非您明确定义了“onmouseout”。

来源

2014-06-16 02:32:30 Kunal

CSS悬停与JavaScript mouseover

回答

相关问题