懸停時的背景圖像更改

我正在創建一個菜單，它改變了懸停時的背景。您可以看到示例on JSFiddle。懸停時的背景圖像更改

當它在JSFiddle中運行時，一切都很好。但是，當我嘗試在我的網站中使用此代碼時，它失敗。

這是我的代碼：

<html> 
    <head> 
     <title>Sample</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <style> 
     body { 
      background: #ccc; 
      transition:0.5s; 
     } 
    </style> 
    </head> 
<body> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#div-1").hover(
        function() { 
         $('body').css("background", "#ff9900"); 
        }, 
        function() { 
         $('body').css("background", "#ccc"); 
        } 
       ); 

       $("#div-2").hover(
        function() { 
         $('body').css("background", "red"); 
        }, 
        function() { 
         $('body').css("background", "#ccc"); 
        } 
       ); 

       $("#div-3").hover(
        function() { 
         $('body').css("background", "yellow"); 
        }, 
        function() { 
         $('body').css("background", "#ccc"); 
        } 
       ); 
      } 
     </script> 

    <a id="div-1" href="#"> Orange</a> 
    <a id="div-2" href="#">Red</a> 
    <a id="div-3" href="#">Yellow</a> 
</body> 
</html>

誰能有什麼想法，我究竟做錯了什麼？

來源

2013-07-26 Joe Marie

您可以使用jQuery的'css（）'函數設置背景圖像。 http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property – Pieter

在js小提琴中，您的代碼被包裝在一個On Load事件中，而您當前的代碼位於$（文檔）.ready（） –

你是不是在notepad ++中工作是什麼意思？你的意思是你寫在記事本+ +，保存它，然後在瀏覽器中運行，並沒有達到預期的結果？ –

你錯過了關閉）;用記事本++檢查了它，現在它正在工作。

<html> 
    <head> 
     <title>Sample</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <style> 
     body { 
      background: #ccc; 
      transition:0.5s; 
     } 
    </style> 
    </head> 
<body> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#div-1").hover(
        function() { 
         $('body').css("background", "#ff9900"); 
        }, 
        function() { 
         $('body').css("background", "#ccc"); 
        } 
       ); 

       $("#div-2").hover(
        function() { 
         $('body').css("background", "red"); 
        }, 
        function() { 
         $('body').css("background", "#ccc"); 
        } 
       ); 

       $("#div-3").hover(
        function() { 
         $('body').css("background", "yellow"); 
        }, 
        function() { 
         $('body').css("background", "#ccc"); 
        } 
       ); 
      }); 
     </script> 

    <a id="div-1" href="#"> Orange</a> 
    <a id="div-2" href="#">Red</a> 
    <a id="div-3" href="#">Yellow</a> 
</body> 
</html>

來源

2013-07-26 12:58:11

哦人，我錯過了）;部分，謝謝你的迴應！ :) –

@JoeMarie很高興幫助。 –

在記事本++中，它不會識別您正在訪問的jQuery代碼。對於身體部分：

$('body').css('background-image', 'urlofimage');

來源

2013-07-26 12:49:51 JonathanRomer

懸停時的背景圖像更改

回答

相關問題