悬停时背景图像发生变化

background-image change on hover

本文关键字：变化 图像 背景 悬停      更新时间：2023-09-26

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

有人知道我做错了什么吗？

您错过了结束）；用记事本++检查了这个，现在它可以工作了。

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

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

$('body').css('background-image', 'urlofimage');
相关文章：