background-image change on hover

问题

I am creating a menu, which changes background on hover. You can see the example on JSFiddle.

Everything is fine, when it is running in JSFiddle. But, when I trying to use this code in my website, it fails.

This is my code:

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

Can anyone have any idea, what am I doing wrong?

回答1:

You are missing the closing ); Checked this with notepad++ and it's working now.

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

回答2:

Well in notepad++, it wont recognize the jquery code that your are accessing. And for the body part :

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

来源：https://stackoverflow.com/questions/17881699/background-image-change-on-hover

标签

javascript

html

jsfiddle