menu içinde herhangi bir div class'ın üstüne geldiğinde arkaplanın resmini değiştirmeye çalışıyorum ancak yapamadım bir türlü.

Resmin önce normal pozisyonunu gösteriyorum üstüne geldiğindede menu-li divinin arkaplanının değişmesini sağlamaya çalışıyorum ama yapamadım.

Css Bu şekilde

#menu
{
    float: left;
    width: 874px;
    height: 50px;
    background-image: url('../images/deneme.png');
    background-position: 0px 0px;
    background-repeat: repeat-x;
}
.menu-li
{
    float: left;
    width: auto;    
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;   
}
.menu-li:Hover
{           
    background-image: url('../images/deneme.png');
    background-position: 0px -50px;
}

üstüne geldiğinde arkaplanı değişecek divler bu şekilde

<div id="menu">    
        <div class="menu-li">Menu 1</div> 
        <div class="menu-li">Menu 2</div> 
        <div class="menu-li">Menu 3</div> 
        <div class="menu-li">Menu 4</div>
</div>

Şimdi jquery ilede şöyle denedim menu-li:Hover'ı kaldırarak ama yine olmadı
$("div.menu-li").css({backgroundPosition: '0px -50px'});

Nasıl olabilir ?