jQuery使用背景图像位置更改链接的悬停状态

Question

我有一个现有的网站，像我的大部分情况一样，我必须使用jQuery覆盖来改变一些CSS。我可以调整元素的大小并为其提供背景图像，但我无法使悬停状态起作用。

你可以在这里看到我工作的JSfiddle：http://jsfiddle.net/wdNF6/

似乎不起作用的大事是

$('.slideshow-screen .slide-item-current .play-button').hover( function(){
        $(this).css('background-position', 'something something');
}

我使用了遍布stackoverflow的示例中的.hover()。当您转到示例时，按钮应为蓝色，其中包含图像。将鼠标悬停在它上面应重新定位bg图像。但是当你转到这个例子时，默认的css pre-jQuery会显示出来。如果删除第二部分的jquery，第一部分就可以了。

有什么建议吗？

Answer 1

缺少功能

的右括号

$('.slideshow-screen .slide-item-current .play-button').hover( function(){
            $(this).css('background-position', 'bottom center');
    }​); <--- Missing this

这也可以简单地写成

$('.play-button').css({
    width: '90px',
    height: '90px',
    'background-color': '#0000ff',
    'background-position': 'top center',
    'background-image': 'url(http://www.lessardstephens.com/layout/images/slideshow_big.png)'
});

$('.play-button').hover(function() {
    $(this).css('background-position', 'bottom center');
});​

<强> Check Fiddle

Answer 2

你检查了吗？你的代码有错字。

你最后错过了一个结尾);。

$(document).ready(function () {
    $('.slideshow-screen .slide-item-current .play-button').css({
        width: '90px',
        height: '90px',
            'background-color': '#0000ff',
            'background-image': 'url(http://www.lessardstephens.com/layout/images/slideshow_big.png)',
            'background-position': 'top center'
    });

    $('.slideshow-screen .slide-item-current .play-button').hover(function () {
        $(this).css('background-position', 'bottom center');
    },
    // Also you need to reset
    function () {
        $(this).css('background-position', 'top center');
    });
});​

已修复：http://jsfiddle.net/Vc84h/