无法让我的 javascript 工作

Question

我已经达到了预期的效果，但后来更新了 HTML/CSS，JS 又回到了零。

fiddle在这里-

jsfiddle.net.

$( "#allies" ).hover(function() {
  $('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
  });
$( "#enemies" ).hover(function() {
  $('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
  });  
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});

/*css*/
 
#bg{
  background-image:url('https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png');
}
 
#wrap_main{display:block;
    width:80%;
    margin-left:auto;
    margin-right:auto;
}
 
#fam{
  display:block;
  margin:auto;
  border:double white 30pt;
  width:100%-30pt;
  float:center;
  background-color: black;
  font-family:fantasy, impact;
  font-size:30pt;
  text-align:center;
  padding-bottom:2em;
}
 
#fam img{display:inline-block;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    padding-bottom:40px;
}
 
#fam a{text-decoration:none;
    color:white;}
 
#fam a:hover{color:gold;}
 
#ae_seg{display:block;margin-left:auto;margin-right:auto;
}
 
#allies{
  display:inline-block;
  border:double 30pt;
  background-color:white;
  top:20%;
  width:34%;
  font-family:fantasy, impact;
  font-size:30pt;
}
 
#allies ul li a{text-decoration:none;
    color:black;}
 
#allies ul li a:hover{color:gold;}
 
#enemies{
  display:inline-block;
  border:double rgb(179,33,7) 30pt;
  background-color:white;
  float:right;
  width:34%;
  color:rgb(179,33,7);
  font-family:fantasy, impact;
  font-size:30pt;
}
 
#enemies ul li a{text-decoration:none;
    color:black;}
 
#enemies ul li a:hover{color:gold;}
 
div img{
  width:120px;
  height:70px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding-top:10px;
  padding-bottom:5px;
}
 
#footer{
  display:block;
  margin:auto;
  border:double white 30pt;
  width:100%-30pt;
  float:center;
  background-color:rgb(179,33,7);
}
 
#footer img{height:120px;
}
 
#footer img:hover{
  transform: rotate(-10deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="bg">
      <div style="padding-bottom:10px;" id="fam">
          <img style="display:block; margin-left:auto; margin-right:auto; pagging-top:10px;padding-bottom:40px;" src="http://fontmeme.com/permalink/170208/c2e98ece9088b3589606aa5f59e629f2.png">
          <a href="https://apps.facebook.com/mobwars/family/index.php?family_id=79788" target="_blank">BBTG_VENG</a><span style="font-size:24pt;color:white;"> & BBTG tags</span>
      </div>
    <div id="wrap_main">
      <div style="padding:4em;">
      </div>
      <div id="ae_seg">
        <div id="allies">
            <img src="http://fontmeme.com/permalink/170203/949c0c2c2c0c34c044b9b45585717a70.png">
            <ul>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=50978" target="_blank">ON HOLIDAY</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=73574" target="_blank">AKD_FLGSHP</a><span style="font-size:24pt;"> & AKD tags</span></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=77265" target="_blank">MOOzing</a><span style="font-size:24pt;"> & Cow related tags</span></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=81836" target="_blank">S N G</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=79535" target="_blank">CRIME CITY</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=59564" target="_blank">BOUTIQUEOG</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=80332" target="_blank">RKNHVK 1</a><span style="font-size:24pt;"> & RKN tags</span></li>
            </ul>
        </div>
        <div id="enemies">
            <img src="http://fontmeme.com/permalink/170203/e8d4db59e876e5c94bd8f072137e33e2.png">
            <ul>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=40" target="_blank">PHOENIX</a><span style="font-size:24pt;"> & PHX/PX tags</span></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=42901" target="_blank">THEFALLEN</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=79839" target="_blank">FALLENONES</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=69048" target="_blank">CAULDRON</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=81533" target="_blank">BC TA</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=80207" target="_blank">DIMINISHED2</a></li>
              <li><a href="https://apps.facebook.com/mobwars/family/index.php?family_id=81185" target="_blank">CLF WMD</a><span style="font-size:24pt;"> & WMD tags</span></li>
            </ul>
        </div>
      </div>
      <div style="padding:5.3em;">
      </div>
    </div>
    <div style="padding-bottom:10px;" id="footer">
      <a href="index.htm">
        <img src="http://www.iconsdb.com/icons/preview/black/home-5-xxl.png">
      </a>
    </div>
  </body>
</html>

我看不出有什么不妥，但我真的没有那么有经验。

$( "#allies" ).hover(function() {
  $('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
  });
$( "#enemies" ).hover(function() {
  $('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
  });  
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});

Answer 1

现在正在运行，请在您的项目中添加 jquery。 fiddle here

Answer 2

其他人已经在评论中解释过了，你使用的是jQuery而不是普通的JavaScript。您需要将 jQuery 库附加到您的项目中。

CDN 如果您想通过 CDN 使用 jQuery，请使用以下代码：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

见jQuery CDN

下载如果您想要在您的项目中拥有自己的 jQuery 库副本，请下载它 here 并像这样实现它：

<script src="jquery-3.1.1.min.js"></script>

请记住，如果您使用另一个版本的 jQuery，您需要更改此代码段中的版本号。

无法让我的 javascript 工作

Can't get my javascript to work

html

javascript

css

jquery

loading