title: JQuery to Update Parent Class In External File
body: <p>So I am having a bit of trouble when trying to move from having all my code in one file, to having it stored in three separate files (CSS, HTML, and JS). When they were all in one file, the jquery code that I was using was working (not perfectly, but thats a different issue) but it was working enough for what I needed it. So in an effort to organize things I began to move code into the different files, as opposed to one sloppy HTML file. </p>
  
  <p>Everything works fine, except for the jQuery code which is in the Javscript file. I was using the hover() function so that when the link with class "ne" was hovered over, it would update the parent's (a screen overlay) background to now be a certain image. </p>
  
  <p>But now that it is in an external file, I am not sure how I can achieve the same functionality. </p>
  
  <p>Here is the snippet for the code I am currently workign with: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var script = document.createElement('script');
  script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
  script.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(script);
  
  function openNav() {
      document.getElementById("myNav").style.width = "100%";
  }
  function closeNav() {
      document.getElementById("myNav").style.width = "0%";
  }
  
  /*$(".ne").hover(function(){
      $(this).parent().parent().addClass("newengland");
  });
  $(".ne").mouseleave(function(){
      $(this).parent().parent().addClass("overlay");
      $(this).parent().parent().removeClass("newengland");
  });*/</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
  body {
    font-family: 'Oswald', sans-serif;
    background-color: white;
  }
  .colorado{
    width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
    background-position: 0 0px;
    background-size: cover;
  }
  .newengland{
    width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
    background-position: 0 2160px;
    background-size: cover;
  }
  .europe{
    width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
    background-position: 0 4320px;
    background-size: cover;
  }
  .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    
    overflow-x: hidden;
    transition: 0.5s;
  }
  
  .overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  
  .overlay a {
    font-family: Oswald;
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }
  
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }
  
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;div id="myNav" class="overlay"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
    &lt;div class="overlay-content"&gt;
      &lt;a href="#" class="co" onhover = "update()" &gt;co&lt;/a&gt;
      &lt;a href="#" class="ne"&gt;ne&lt;/a&gt;
      &lt;a href="#" class="eu"&gt;eu&lt;/a&gt;
      &lt;a href="#" class="ab"&gt;ab&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;h2&gt;Temp&lt;/h2&gt;
  &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; Open&lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And what I aim to have happen is when you hover over the different elements of the overlay, it should add a class to the div, which will change its background. And again, this was working in the spaghetti code file, but now it is not. Hope you can help, thank you for reading!</p>