Question

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

任何人都可以有任何想法，我做错了什么？

Answer 1

你错过了结束）;用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>

Answer 2

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

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

悬停时的背景图像变化

2 个答案: