更改背景位置 - 更好地使用 jQuery 或 :hover 与 Selectivizr？答案

【问题标题】：Changing background-position - better to use jQuery or :hover with Selectivizr?更改背景位置 - 更好地使用 jQuery 或 :hover 与 Selectivizr？
【发布时间】：2011-05-29 21:49:19
【问题描述】：

我用 jQuery 做背景翻转已经有一段时间了，像这样：

 $("#menusearchbutton").hover(function(){$(this).css('backgroundPosition', '0px -24px');},function(){$(this).css('backgroundPosition', '0px 0px');});

但我最近遇到了允许在 IE6-8 中使用伪类的 Selectivizr，其中包括 :hover。

这会是比使用 jQuery 更好的方法吗？当然，它们都是 JS，因此无法满足用户启用 javascript 的要求。但除此之外，用一个代替另一个有什么好处吗？

干杯:)

【问题讨论】：

标签： jquery css css-selectors pseudo-class

【解决方案1】：

Nick 是对的：你应该使用原生的 :hover 功能。需要注意的几点：如果<a> 没有href="" 属性，则悬停效果在IE 中效果不佳。别忘了。

此外，我们经常希望在 div 上产生悬停效果。这是因为 div 的默认显示。如果您想让<a> 标记看起来像一个 div，请在您的 CSS 中使用 display:block。

【讨论】：

【解决方案2】：

:hover 已经在 IE7+ 中工作，IE6 只允许它与 <a> 元素一起使用...所以我想说你已经可以单独使用 CSS 而没有库，只要 IE6 不是问题。

#menusearchbutton { background-position: 0px 0px; }
#menusearchbutton:hover { background-position: 0px -24px; }

【讨论】：