jQuery懸停的多重效果（導航欄）

Question

我是jQuery的新手，所以我認爲這對於很多人來說都是微不足道的。我正在製作一個帶有子菜單的導航欄，當主菜單懸停時出現。我想要更改主菜單的背景圖像，並且同時顯示子菜單。這是我的代碼：

 
$('#nav-list li.products').hover(
     function() { 
      $('#nav-list li.products ul').addClass("hover"); 
      $(this).css("background-image","url(img/products-hover.png)"); 

     }, 
     function() { 
      $('ul', this).removeClass("hover"); 
      $(this).css("background-image","url(img/products.png)"); 
     } 
    ); 

此代碼只顯示子菜單，但不更新主菜單的樣式。我如何在jQuery中實現這一點？謝謝！

Answer 1

$(this).css("background-image","url(img/products-hover.png)"); 

上述代碼會將background-image: url(img/products-hover.png添加到當前網頁的DOM。
所以我想圖像img/products-hover.png可能是相對於CSS文件，但可能不相對於當前的URL。

與相對於像/img/products-hover.png或我寧願在這種情況下一個絕對路徑一樣http://www.example.com/img/products-hover.png

例

$('#nav-list li.products').hover(
     function() { 
      $('#nav-list li.products ul').addClass("hover"); 
      $(this).css("background-image","url(http://www.example.com/img/products-hover.png)"); 

     }, 
     function() { 
      $('ul', this).removeClass("hover"); 
      $(this).css("background-image","url(http://www.example.com/img/products.png)"); 
     } 
    );