Wie kann bekomme der Zoom mit Zwei Div von liebewinter, 03.05.2020 17:15

header Element verhindert Javascript ausführen

liebewinter 02.05.2020 15:13

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

Beitrag melden

– Informationen zu den Bewertungsregeln

header Element verhindert Javascript ausführen

JürgenB Homepage des Autors 02.05.2020 22:57

– Informationen zu den Bewertungsregeln

Hallo,

Mouseevents werden nur von Mäusen ausgelöst. Nimm besser Pointerevents.
pageX/Y ist veraltet, nimm lieber clientX/Y.
Beide liefern die Koordinaten relativ zum Dokument bzw. Anzeigebereich. Du musst diese Werte noch mit der Position des Elements, auf die sie sich beziehen sollen, verrechnen, siehe getBoundingClientRect.

Gruß
Jürgen

Beitrag melden

– Informationen zu den Bewertungsregeln

header Element verhindert Javascript ausführen

liebewinter 03.05.2020 10:23

– Informationen zu den Bewertungsregeln

viele dank für deinen Antwort!, aber als ich keine Ahnung von Javascript habe, ich versuche mit andere code...

Beitrag melden

– Informationen zu den Bewertungsregeln