web-dev-qa-db-fra.com

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

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?

jquerycssbackground-position
33
Mats

Voici:

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

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

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

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.

6
Karen
$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});
3
Ben Shelock

Définit une nouvelle valeur pour backgroundPosition sur le div carousel quand un li dans le div submenu est survolé. Supprime 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);
});
2
jitter