title: Bizarre problem with onmouseover events not playing sounds
body: <p>Alright, I recently tried to add sound effects to my portfolio.  Everytime the user puts the mouse pointer over a tile representing one of my projects, it makes a sound.  Seems simple enough, right?  Well, I have a strange error.  The sounds on the first two panels don't play until the sound on one of the panels below them does.  IE I have to glide my mouse over "Austin Weather Monitor" or "Bomb Defuser" before the sounds for "Crystal Collector" or "Train Timer" play.  Here is my full code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang ="en-us"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Portfolio&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
     &lt;style&gt;
  
    #content {
      display: none;
    }
  
    .thumbnail:hover {
      border-style: solid;
      border-width: 3px;
      border-color:#E67F18;
    }
  &lt;/style&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
     &lt;/head&gt;
  
  
  
  
  &lt;body onload="showStuff()"&gt;
  
  
      &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;Dennis Markham&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
        &lt;li class = "active"&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;!-- &lt;div class ="container"&gt;
  &lt;section class ="row"&gt;
  &lt;div class ="col-md-1"&gt;
  &lt;/div&gt;
  &lt;div class="col-md-10"&gt; 
  &lt;a href = "https://dennismarkham.github.io/trainTime/"&gt; &lt;img class = "portfolio" src = "images/dummy_image.png" alt ="train simulator"&gt;&lt;span class = "caption"&gt;Train Timer &lt;/span&gt;&lt;/img&gt;&lt;/a&gt; 
  
  
  &lt;a href = "https://dennismarkham.github.io/week-4-game/"&gt;&lt;img class = "portfolio" src = "images/dummy_image.png" alt ="crystal collector"&gt;&lt;/img&gt;&lt;/a&gt;
  
  
  &lt;a href = "#"&gt;&lt;img class = "portfolio" src = "images/dummy_image.png" alt ="coming soon..."&gt;&lt;/img&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class = "col-md-1"&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/div&gt; --&gt;
  &lt;div id = "content"&gt;
  
  
  &lt;div class = "row"&gt;
  &lt;div class = "col-md-1"&gt;
  &lt;/div&gt;
  
  &lt;h1 style="padding: 5px; display: inline; border-radius:25px;"&gt;Solo Endeavors&lt;/h1&gt;
  &lt;hr&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  
    &lt;div class="col-md-4" onmouseover ="crystal()"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;a href="https://dennismarkham.github.io/week-4-game/"&gt;
          &lt;img style = "height: 250px" src="images/crystal.png" alt="Crystal" style="width:100%"&gt;
          &lt;div class="caption"&gt;
            &lt;p&gt;Crystal Collector&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="col-md-4" onmouseover = "train()"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;a href="https://dennismarkham.github.io/trainTime/"&gt;
          &lt;img  style = "height: 250px" src="images/train2.png" alt="Train" style="width:100%"&gt;
          &lt;div class="caption"&gt;
            &lt;p&gt;Train Timer&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  
    &lt;div class="col-md-4" onmouseover="boom()"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;a href="https://dennismarkham.github.io/BombDefuser/"&gt;
          &lt;img style = "height: 250px" src="images/bomb.png" alt="Bomb" style="width:100%"&gt;
          &lt;div class="caption"&gt;
            &lt;p&gt;Bomb Defuser&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-4" onmouseover="thunder()"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;a href="https://dennismarkham.github.io/trainTime/"&gt;
          &lt;img  style = "height: 250px" src="images/weather.png" alt="Train" style="width:100%"&gt;
          &lt;div class="caption"&gt;
            &lt;p&gt;Austin Weather Monitor&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  
    &lt;div class="col-md-4"  onmouseover="shutter()"&gt;
      &lt;div class="thumbnail" &gt;
        &lt;a href="https://rphotogallery.herokuapp.com/"&gt;
          &lt;img style = "height: 250px" src="images/camera.png" alt="camera" style="width:100%"&gt;
          &lt;div class="caption"&gt;
            &lt;p&gt;React Photo Gallery&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-4"&gt;
  
    &lt;/div&gt;
  
  
    &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class = "row"&gt;
  &lt;div class = "col-md-1"&gt;
  &lt;/div&gt;
  &lt;h1 style="padding: 5px; display: inline; border-radius:25px;"&gt;Group Work&lt;/h1&gt;
  &lt;hr&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  
  
     &lt;div class="col-md-4" onmouseover = "typing()"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;a href="https://cacheualcorner.herokuapp.com/"&gt;
          &lt;img src="images/CC.png" alt="Cache-ual Corner (chat room)" style="width:100%"&gt;
          &lt;div class="caption"&gt;
            &lt;p&gt;Cache-ual Corner&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-4"&gt;
    &lt;/div&gt;
    &lt;div class = "col-md-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;script&gt;
  //QUESTIONS:
  //-Train sound and magic sound
  
  
  var trainSound = new Audio("train.wav");
    trainSound.volume = 0.2;
  
    var crystalSound = new Audio("crystal.wav");
    crystalSound.volume = 0.5;
  
     var shutterSound = new Audio("shutter.wav");
     shutterSound.volume = 0.4;
  
    var thunderSound = new Audio("thunder.wav");
    thunderSound.volume = 0.3;
  
    var boomSound = new Audio("boom.mp3");
    boomSound.volume = 0.3;
  
    var typingSound = new Audio("typing.wav");
    typingSound.volume = 0.3;
  
    function showStuff() {
      $("#content").fadeIn("slow");
  }
  
  
   function train(){
    trainSound.play();
   }
  
   function crystal(){
    crystalSound.play();
   }
  
   function shutter(){
   shutterSound.play();
   }
  
   function thunder(){
    thunderSound.play();
   }
  
   function boom(){
    boomSound.play();
   }
  
  function typing(){
    typingSound.play();
  }
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Why is this?  I've tried re-ordering the variables and the functions in the scripts but it doesn't change anything.</p>