web-dev-qa-db-ja.com

jQueryを使用して背景の位置を変更する

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

これを行う方法に関する提案はありますか？

jquerycssbackground-position
33
Mats

どうぞ：

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

あなたたちは物事を複雑にしている。これはCSSから簡単に行えます。

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

上記の反乱の答えは実際には機能しません。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時間かかった。

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

backgroundPosition divのliがホバーされたときに、carousel divのsubmenuに新しい値を設定します。ホバリングが終了したときに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);
});
2
jitter