Элемент заголовка предотвращения выполнения Javascript

Question

извините за мой Engli sh ...

I, чтобы попробовать увеличить изображение как здесь , чтобы сказать, что оно работает (увеличение изображения) без <header> тега.

Ширина тега <header>

При получении с Маусом на изображении, изображение исчезает.

Здесь я могу показать, как создать свой код Html.

$('.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'
  });
});

.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;
}

<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>

Я тоже попробовал с и без <header> Элемента, и показать, какой только рабочий без <header> Элемент ....

Может кто-нибудь помочь мне и сказать, где моя ошибка? Спасибо!

Answer 1

Ваш код работает, хорошо, если бы вы увеличили размер обёртки, вы бы увидели, что ваш img не теряет себя сам, а движется вверх за заголовком.

Проблема была здесь в вашем js: backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px' Это разместило увеличенное изображение позади заголовка. Если вы удалите его, он отобразится в окне и увеличит масштаб, но не обновит масштаб при перемещении мыши Я устал играть с этим, но я не мог заставить его работать, и у меня больше нет времени на это. Так что я оставляю этот ответ здесь, может быть, у кого-то есть идея.

Я пытался поиграть с этим: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX Я мог заставить мышь реагировать только на внутреннюю обертку, но я не мог заставить картинку работать, чтобы реагировать на это.

Удачи.

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

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


$('.wrapper').on('mousemove', function(updateDisplay) {
var box = document.querySelector(".wrapper");
var pageX = document.getElementById("x");
var pageY = document.getElementById("y");
function updateDisplay(event) {
    $('.img').css({
 backgroundPosition: (event.pageX * -1) + 'px ' + (event.pageY * -1) + 'px'
  });
}
box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);
});

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

}

.img {
     margin-right: auto; /* 1 */
  margin-left:  auto;
    width: 100%;
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

<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">
  <span id="x"></span>
    <div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
<span id="y"></span>    
  </div>

</main>