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

이 작업을 수행하는 방법에 대한 어떤 제안이? submenu 사업부의 리튬이 공중 선회하는 carousel 사업부에 backgroundPosition에 대한

Answer 1

당신은 이동 :

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

Answer 2

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

Answer 3

설정 새로운 값. 호버링이 끝나면 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); 
}); 

Answer 4

너희들이 일을 복잡하게한다. 이 작업은 CSS에서 간단하게 수행 할 수 있습니다.

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

Answer 5

반역의 대답은 위의 사실 때문에 CSS로 작동하지 않습니다, '배경 위치는'올바른 버전 그래서 '배경 위치-X'와 '배경 위치-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 시간이 걸렸습니다.