Changer la position d'arrière-plan avec jQuery

Question

Je voudrais changer la position d'arrière-plan d'une classe CSS tout en survolant un élément 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);
}
 

Des suggestions sur la façon de procéder?

Answer 1

Voici:

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

Answer 2

Vous compliquez les choses. Vous pouvez simplement le faire à partir de CSS.

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

Answer 3

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

Answer 4

Définit une nouvelle valeur pour backgroundPosition sur le carousel div quand un li dans le submenu div est survolé. Supprime le backgroundPosition lorsque le survol se termine et réinitialise backgroundPosition à l'ancienne valeur.

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

Answer 5

la réponse de la rébellion ci-dessus ne fonctionnera pas réellement, car pour CSS, «background-position» est en fait un raccourci pour «background-position-x» et «background-position-y», donc la version correcte de son code serait:

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

Il m'a fallu environ 4 heures pour me cogner la tête contre cette situation aggravante.