Изменение фоновой позиции с помощью jQuery

Я хотел бы изменить фоновое положение CSS-класса при наведении курсора на li-элемент.

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

какие-либо предложения о том, как это сделать?

32
background-position css jquery

5 ответов

здесь вы идете:

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

вы все усложнять. Вы можете просто сделать это из CSS.

#carousel li { background-position:0px 0px; }
#carousel li:hover { background-position:100px 0px; }
26
$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});
2

ответ rebellion выше на самом деле не будет работать, потому что для 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 часов удара головой об него, чтобы прийти к этому отягчающему осознанию.

2

устанавливает новое значение backgroundPosition на carousel div, когда Ли в submenu div завис. Удаляет 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);
});
1