使用 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);
    });
});

：我花了四个小时用头撞它，才意识到这个令人恼火的事实。

Answer 4

$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});

Answer 5

当 submenu div 中的 li 悬停时，为 carousel div 上的 backgroundPosition 设置新值。悬停结束时删除 backgroundPosition 并将 backgroundPosition 重置为旧值。

$('#submenu li').hover(function() {
    if ($('#carousel').data('oldbackgroundPosition')==undefined) {
        $('#carousel').data('oldbackgroundPosition', $('#carousel').css('backgroundPosition'));
    }
    $('#carousel').css('backgroundPosition', [enternewvaluehere]);
},
function() {
    var reset = '';
    if ($('#carousel').data('oldbackgroundPosition') != undefined) {
        reset = $('#carousel').data('oldbackgroundPosition');
        $('#carousel').removeData('oldbackgroundPosition');
    }
    $('#carousel').css('backgroundPosition', reset);
});