用鼠標在縮略圖div內控制一個背景圖像的問題

對不起，如果這是一個相當常見的問題，但我向你保證我已經花了最後兩天閱讀，看看我是否可以自己解決，但唉，我在你身邊，希望得到一些建議。我仍處於學習javascript的初級階段。用鼠標在縮略圖div內控制一個背景圖像的問題

基本上，我有一個div類包含的一系列縮略圖，有一個重複的背景圖像給它一個微妙的紋理。我也有一些java腳本，當鼠標懸停在縮略圖圖像上時，它成功突出顯示單個div容器的藍色。我遇到的問題是，純藍色效果與我爲縮略圖div選擇的現有背景圖片無法很好地齧合。在藍色懸停效果發生的時候，我一直試圖切換背景圖片的開啓/關閉，但是我只能在單個鼠標懸停/懸停之後將其關閉。

這裏的JavaScript：

// this controls the entire div tag and turns it blue 
$('.pGrid div a').hover(
    function(){ 
     //this if-statement should toggle whether or not the striped background shows when the mouse is hovering 
     if ($('.pGrid div a').hover !=0) { 
     $('.pGrid div a').parent().css({ backgroundImage: "none" }); 
     } 
     else { 
     $('.pGrid div a').parent().style({ backgroundImage: "url('../images/background_stripes_white.gif')" });  
      } 
     //mouse over turn div blue 
     $(this).parent().stop().animate({ 
      backgroundColor: "#006699", 
      color: "#ffffff" 
      }, 350);  
      // this controls the word-highlight part 
     $(this).stop().animate({ 
      backgroundColor: "#006699", 
      color: "#ffffff" 
      }, 350); 
     }, 
     // mouse out 
    function(){ 
     $(this).parent().stop().animate({ 
      backgroundColor: "#d0d0d0", 
      color: "#000000" 
      }, 350); 
     $(this).stop().animate({ 
      backgroundColor: "#d0d0d0", 
      color: "#006699" 
      }, 350); 
     });

來源

2013-02-21 bobs

而不是更改背景圖片，只要將CSS類名。有一個與形象和一個沒有。

您應該也可能在您的A-tag上使用display:block並直接應用背景（通過CSS類）而不是父項。

來源

2013-02-21 22:33:55

我需要用toggleClass創建一個新的函數嗎？或者我仍然可以使用if-else語句來完成此操作？ – bobs 2013-02-21 23:31:04

您可以使用toggleClass或addClass/RemoveClass，最適合您的代碼模式。 – 2013-02-22 14:44:36

問題已解決。我不得不nix if-else語句，並在每個函數中放置一行代碼，說明將背景設置爲none或切換回原始。另外，事實證明我所引用的文件擴展名都是錯誤的，不得不刪除'../'部分。謝謝@Diodeus的幫助，非常感謝！

來源

2013-02-24 08:43:03 bobs

用鼠標在縮略圖div內控制一個背景圖像的問題

回答

相關問題