title: Sound on hover playing double if mouse gets dragged over SVG icon inside button
body: <p>I have an issue that i check for hover on for example my #homeButton ID and play a sound, the sound plays without any issues, the problem comes when you drag the mouse over the SVG icon inside the button and hit the button again the sound plays which i don't want, it should only be able to play again once you've had the mouse outside of the button.</p>
  <p>Here is how i check for hover:</p>
  <pre><code>$(homeButton)
              .on('mouseover', function (event) {
                  titleDisplay.innerText = 'Hem';
                  hoverSound.play();
              })
              .on('mouseout', function (event) {
                  titleDisplay.innerText = '';
              });
  </code></pre>
  <p>Now this looks like a perfectly functioning code, but if you hover the SVG icon it counts as the 'mouseout' and then plays again when you hit the button again. Both the button and icon are made of SVG's if that helps.</p>
  <p>This homebutton part of the menu looks like this in code:</p>
  <pre><code>&lt;g transform=&quot;translate(0 ,-1.3369) scale(0.9618028136579452)&quot; class=&quot;sector selected&quot; data-id=&quot;homeButton&quot; data-index=&quot;1&quot; id=&quot;homeButton&quot;&gt;&lt;path d=&quot;M35.35534 -35.35534A51.98570776668778 51.98570776668778 0 0 0-35.35534 -35.35534L-14.14214 -14.14214A21.389995436681446 21.389995436681446 0 0 1 14.14214 -14.14214Z&quot;&gt;&lt;/path&gt;&lt;use x=&quot;0&quot; y=&quot;-35&quot; width=&quot;10&quot; height=&quot;10&quot; fill=&quot;white&quot; xlink:href=&quot;#homeSVG&quot; transform=&quot;translate(-5,-5)&quot;&gt;&lt;/use&gt;&lt;/g&gt;
  </code></pre>
  <p>The path tag is the actual button and the use tag is the icon. Does anyone have a solution for not being able to play the sound until you actually go out of the button completly or hit one of the other buttons?</p>
  <p>This does <strong>not</strong> have to be done using jQuery, if you can do it with plain JS that's fine</p>
  <p>Here is a picture of the <a href="https://i.stack.imgur.com/6x0vF.png" rel="nofollow noreferrer">menu</a> if it helps</p>
  <p>While writing this i came up with one solution maybe, haven't tested it yet because i need to sleep! But that solution is by using one variable for every button, for example homeSoundPlayed = false, conteactSoundPlayed = false. And this was the code i thought of then:</p>
  <pre><code>var homePlayed = false; //New line
  var contactPlayed = false; //New line
          $(homeButton)
              .on('mouseover', function (event) {
                  contactPlayed = false; //New line
                  titleDisplay.innerText = 'Hem';
                  if(!homePlayed){ //New line
                      hoverSound.play();
                      homePlayed = true; //New line
                  }
              })
              .on('mouseout', function (event) {
                  titleDisplay.innerText = '';
              });
  
          $(contactButton)
              .on('mouseover', function () {
                  homePlayed = false; //New line
                  titleDisplay.innerText = 'Kontakta Oss';
                  if(!contactPlayed){ //New line
                      hoverSound.play();
                      contactPlayed = true; //New line
                  }
              })
              .on('mouseout', function () {
                  titleDisplay.innerText = '';
              });
  </code></pre>
  <p>So my thought is resetting all other buttons namePlayed var to false when you hover any button, but not resetting the var for the one you currently hover. But then i have the question of, how do i check if you  hovered outside of the menu.</p>
  <p>This is just a solution i came up with, if you know of a better one please tell me!</p>