1

我正在创建一个菜单，它会在悬停时更改背景。您可以在 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>

谁能有任何想法，我做错了什么？

4

2 回答 2

2

你错过了结束 ); 用记事本++检查了这个，它现在可以工作了。

<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-26T12:58:11.197 回答
1

在记事本++中，它不会识别您正在访问的jquery代码。对于身体部分：

$('body').css('background-image', 'urlofimage');
于 2013-07-26T12:49:51.053 回答