使用jQuery更改背景位置

Question

我想在悬停li元素时更改CSS类的背景位置.

HTML:

<div id="carousel">
    <ul id="submenu">
        <li>Apple</li>
        <li>Orange</li>
    </ul>
</div>

CSS:

#carousel { 
    float: left;
    width: 960px;
    height: 360px;
    background: url(../images/carousel.png);
}

有关如何做到这一点的任何建议？

Answer 1

干得好:

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position', '10px 10px');
    }, function(){
        $('#carousel').css('background-position', '');
    });
});

Answer 2

你们这些事情很复杂.你可以从CSS简单地做到这一点.

#carousel li { background-position:0px 0px; }
#carousel li:hover { background-position:100px 0px; }

Answer 3

上面叛乱的答案实际上是行不通的，因为对于CSS而言，“ background-position”实际上是“ background-position-x”和“ background-position-y”的简写，因此他的代码的正确版本是：

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position-x', newValueX);
        $('#carousel').css('background-position-y', newValue);
    }, function(){
        $('#carousel').css('background-position-x', oldValueX);
        $('#carousel').css('background-position-y', oldValueY);
    });
});

我花了大约4个小时将自己的头撞在上面，才意识到这一点。