jQuery 更改 CSS 背景位置和鼠标悬停/鼠标移出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2515423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change CSS background position and mouseover/mouseout
提问by steelfrog
I have a menu composed of a single image (e.g., sprites). In order to display the hover image, I simply move the background image down. I'd like this effect to be controlled by jQuery and animated.
我有一个由单个图像（例如精灵）组成的菜单。为了显示悬停图像，我只需将背景图像向下移动。我希望这种效果由 jQuery 控制和动画。
This is a sample menu item.
这是一个示例菜单项。
<ul>
<li id="home"><a href="#"></a></li>
</ul>
This is what I'm toying with. I'm very new to jQuery and am having problems getting the proper selector going.
这就是我在玩弄的。我对 jQuery 非常陌生，并且在使用正确的选择器时遇到了问题。
$(document).ready(function(){
$('#home a');
// Set the 'normal' state background position
.css( {backgroundPosition: "0 0"} )
// On mouse over, move the background
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
Could you point out what I'm doing wrong? I know the selector is probably incorrect but I'm having a hard time figuring out how to manipulate the anchor.
你能指出我做错了什么吗？我知道选择器可能不正确，但我很难弄清楚如何操作锚点。
回答by Pointy
If you were not animating the transitions — and given the kinds of images I've grouped as sprites, I don't know why you'd ever do that — then you'd want something like this:
如果您没有为过渡设置动画——并且考虑到我将图像分组为精灵的种类，我不知道您为什么要这样做——那么您会想要这样的东西：
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function() {
$(this).css('backgroundPosition', '0 -54px');
})
// On mouse out, move the background back
.mouseout(function() {
$(this).css('backgroundPosition', '0 0');
})
});
Now, if you aretrying to animate that, then you've got bad syntax for the CSS and for the calls to "animate".
现在，如果你正在试图动画效果，那么你已经有了对CSS和调用到“动画”语法错误。
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition: "0 0"}, 500);
})
});
Again, I am doubtful that jQuery is going to be able to animate "backgroundPosition" for you, but then I don't do "animate()" very often and jQuery always manages to surprise me.
再说一次，我怀疑 jQuery 是否能够为您制作“backgroundPosition”动画，但是我不经常使用“animate()”，而且 jQuery 总是能让我感到惊讶。
edit:here's a page: http://snook.ca/archives/javascript/jquery-bg-image-animations/
编辑：这里有一个页面：http: //snook.ca/archives/javascript/jquery-bg-image-animations/
回答by bobince
{backgroundPosition:"(0 -54px)"
{背景位置：“（0 -54px）”
(You don't want the brackets there. There's no brackets in a CSS background-positionrule.)
（您不想要括号。CSSbackground-position规则中没有括号。）
In any case jQuery doesn't know how to animate a compound value like backgroundPosition. In IE you get access to it with backgroundPositionY, which, as a simple value, jQuery cananimate. However this is non-standard and won't work elsewhere.
在任何情况下，jQuery 都不知道如何为像backgroundPosition. 在 IE 中，您可以使用 访问它backgroundPositionY，作为一个简单的值，jQuery可以设置动画。然而，这是非标准的，不会在其他地方工作。
Here's a pluginthat claims to fix it.
回答by Fedwar
i liked this method (just css)
我喜欢这个方法（只是 css）
.maintopbanner a:hover{
background-position: -200px 0 !important;}
.maintopbanner a {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
}
回答by nolan campbell
$('#home a')
.mouseenter(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 -54px)"},500)
})
.mouseleave(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 0)"},500)
})
//Use MouseEnter and MouseLeave whenever possible and you do not need to type out duration with the current version of jQuery. Hope this helps.
// 尽可能使用 MouseEnter 和 MouseLeave，并且您不需要使用当前版本的 jQuery 输入持续时间。希望这可以帮助。
回答by harpax
I would imagine your background is bound to the li?! However thisis set to the aof the selector, so if my assumption is correct you would need to change your code to
我想你的背景一定是li？！但是this设置为a选择器的 ，所以如果我的假设是正确的，您需要将代码更改为
$(document).ready(function(){
$('#home a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
})
// On mouse out, move the background back
.mouseout(function(){
$(this).parent().stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
