header Element verhindert Javascript ausführen

[liebewinter]

Hallo, ich habe diese code von hier bekomme.

ich versuche mit der gleiche code, der code funzioniert aber ohne der <header> Elemente, das ganze code;

Der Javascript code,

$('.wrapper').on('mouseenter', function() {
  $('.img').css({
    transform: 'scale(2.5)'
  });
});

$('.wrapper').on('mouseleave', function() {
  $('.img').css({
    transform: 'scale(1.0)',
    backgroundPosition: 'center center'
  });
});

$('.wrapper').on('mousemove', function(e) {
  $('.img').css({
    backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px'
  });
});

der Css code,

.row {
  margin: 10px;
}

.wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid navy;
  overflow: hidden;
}

.img {
  width: 100%;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Der html code,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="log">
    <img id="logo" src="/kalamulur/Photo/my-logo5.png" alt="">
  </div>
  <div class="linken">
    <ul class="linken_ul">
      <li class="dropdown">
        <a href="/Kalamulur/home.php" class="dropdown"><i>Home</i></a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn"><i>Taschen & Rucksäcke</i></a>
        <div class="dropdown-content">
          <a href="tachen_rucksacke_&_Computertaschen.php"><i>Taschen, Tablettaschen & Computertaschen</i></a>
          <a href=""><i>Rucksäcke</i></a>
          <a href=""><i>Beutel</i></a>
          <a href=""><i>Gürteltasche, Mäppchen & Schnupftabakdose</i></a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn"><i>Haus</i></a>
        <div class="dropdown-content">
          <a href=""><i>Dekoration</i></a>
          <a href=""><i>Teppich</i></a>
          <a href=""><i>Yogamatten & Necessaire</i></a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn"><i>Kleidung</i></a>
        <div class="dropdown-content">
          <a href=""><i>T-Shirts für Frauen & Männer</i></a>
          <a href=""><i>Hösen für Frauen & Männer</i></a>
          <a href=""><i>Schals, Mützen & Hute</i></a>
          <a href=""><i>Sandalen</i></a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn"><i>Schmuck</i></a>
        <div class="dropdown-content">
          <a href="#"><i>Ringe, Ohrringe, Ketten ...</i></a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn"><i>Über uns</i></a>
        <div class="dropdown-content">
          <a href=""><i>Über uns</i></a>
          <a href=""><i>Kundenservice</i></a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn">&#127757; English</a>
        <div class="dropdown-content">
          <a href="">Spanisch</a>
        </div>
      </li>
    </ul>
  </div>
</header>
<main>

  <div class="wrapper">
    <div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
  </div>

</main>

Mit diesem Code bekomme wie das Bild auszeigt,

aber wenn lase der Maus auf dem Bilder, das Bild verschwinden,

Wenn mache ohne der <header> Element, bekomme alles Gut,

so, das <header> Element verhindert der javascript ausführen, auch wenn lase der Element leer, (nur lase der Element <header>), ich bin seit einiger Stunde der suche die Grund, aber ohne erfolgt, deshalb frage hier ob jemand mir helfe kann...