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

Question

I have an existing site, and like most of my cases I have to use a jQuery override to change some css. I can resize the element and give it a background image, but I can't get the hover state to work.

You can see my working JSfiddle here: http://jsfiddle.net/wdNF6/

The big that seems to not work is

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

I used the .hover() from examples I found throughout stackoverflow. When you go to the example, the button should be blue with an image in it. Hovering over it should reposition the bg image. But when you go to the example, the default css pre-jQuery shows. If you remove the second bit of jquery, the first part works.

Any suggestions?

Answer 1

Missing the closing brace for the function

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

Also this can be simply be written as

$('.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

Did you check? Your code had a typo.

You missed an ending ); at the end.

$(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');
    });
});​

Fixed: http://jsfiddle.net/Vc84h/