background-image change on hover

Question

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?

You can set a background-image with the `css()` function of jQuery. http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property — Pieter, Jul 26 '13 at 12:50
In the js fiddle your code is wrapped in an On Load event, while as to your current code is in $(document).ready() — Patsy Issa, Jul 26 '13 at 12:53
What do you mean by not working in notepad++ ? Do you mean you are writing it in notepad++, saving it and then running it in the browser and not achieving the desired result? — reggaemahn, Jul 26 '13 at 12:53
Installing firebug and checking the console for javascript errors can lead you in the right direction (or use your browser-of-choice's dev tools) — Jason Fingar, Jul 26 '13 at 12:56
my problem is solved by @JeevanJose, anyway thank you guys for your response :) — Joe Marie, Jul 26 '13 at 13:07

score 2 · Accepted Answer · answered Jul 26 '13 at 12:58

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>

oh man, i missed that ); part, thank you for your response! :) — Joe Marie, Jul 26 '13 at 13:04

score 1 · Answer 2 · answered Jul 26 '13 at 12:49

1

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

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

answered Jul 26 '13 at 12:49

Jonathan Römer

629
5
23

background-image change on hover

2 Answers2

Linked