Thay đổi vị trí nền bằng jQuery

Question

Tôi muốn thay đổi vị trí nền của lớp CSS trong khi di chuột qua phần tử 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); 
} 

Bất kỳ đề xuất về cách để làm điều này?

Answer 1

Ở đây bạn đi:

$(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

Sets giá trị mới cho backgroundPosition trên carousel div khi một li trong submenu div đang bay lượn. Xóa backgroundPosition khi di chuột kết thúc và đặt lại backgroundPosition thành giá trị cũ.

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

Các bạn đang làm phức tạp mọi thứ. Bạn có thể làm điều này đơn giản từ CSS. câu trả lời

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

Answer 5

nổi loạn của trên sẽ không thực sự làm việc, bởi vì CSS, 'background-position' thực sự là viết tắt cho 'background-position-x' và 'background-position-y' để các phiên bản đúng của mình mã sẽ là:

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

Mất khoảng 4 giờ đập đầu tôi để chống lại điều đó.