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

Question

我有一个现有的站点，并且像我的大多数情况一样，我必须使用 jQuery 覆盖来更改一些 css。我可以调整元素的大小并给它一个背景图像，但我无法让悬停状态工作。

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

似乎不起作用的大是

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

我使用了.hover()在整个 stackoverflow 中找到的示例。当您转到示例时，按钮应该是蓝色的，其中包含图像。将鼠标悬停在它上面应该重新定位 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');
});​

检查小提琴

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/