jQuery .hover() seltsames Verhalten

Ich möchte eine Bildergalerie mit HTML, CSS & jQuery erstellen. Ich habe eine div erstellt, die erscheint, wenn meine Maus auf eine andere div eingeht. Aber wenn meine Maus auf die div geht, erscheint die andere div einmal, verschwindet und erscheint dann wieder. Wie behebe ich das?jQuery .hover() seltsames Verhalten

jQuery

$(function(){ 
    // stock dans des variables 
    var dark = $('.hov'); 
    var img = $('img'); 

    // cacher les hover 
    dark.hide(); 

    // montrer au survol de l'image 
     img.mouseenter(function(){ 
      $(this).next().fadeIn('slow'); 
     }); 
     img.mouseleave(function(){ 
      $(this).next().fadeOut('slow'); 
     }); 
});

HTML

<div class="row"> 
      <div class="col-md-4"> 
       <img src="http://placehold.it/350x250"> 
       <div class="hov"></div> 
      </div> 
      <div class="col-md-4"> 
       <img src="http://placehold.it/350x250"> 
       <div class="hov"></div> 
      </div> 
      <div class="col-md-4"> 
       <img src="http://placehold.it/350x250"> 
       <div class="hov"></div> 
      </div> 
     </div>

Quelle

2016-07-28 Antonin Mrchd

Können Sie uns mit diesem Fall etwas Geige bieten? – 3rdthemagical

Ich schätze, das nächste Element überlagert sich mit dem, das du gerade bewegst, welches dann das mouseleave -Ereignis auslöst und dann das mouseenter -Ereignis auslöst, sobald das nächste Element wieder ausgeblendet wird, und so weiter ... Biete auch relevantes CSS an. Wie auch immer, du solltest diese Ereignisse einfach an '.col-md-4' Container Ebene binden –

Entschuldigung, ich verstehe deine Frage nicht! –

Ich denke, Sie sollten versuchen, diese: https://jsfiddle.net/km3ewek5/1/

(Beachten Sie die mouseleave auf dieistelement)

$(function(){ 
    // stock dans des variables 
    var dark = $('.hov'); 
    var img = $('img'); 

    // cacher les hover 
    dark.hide(); 

    // montrer au survol de l'image 
     img.mouseenter(function(){ 
      $(this).next().fadeIn('slow'); 
     }); 
     dark.mouseleave(function(){ 
      $(this).fadeOut('slow'); 
     }); 
});

Quelle

2016-07-28 17:31:42 kukkuz

Sie sind die mouseleave Ereignis an das falsche Element befestigt wird. So

ändern

img.mouseenter(function(){ 
     $(this).next().fadeIn('slow'); 
    }); 
    img.mouseleave(function(){ 
     $(this).next().fadeOut('slow'); 
    });

img.mouseenter(function() { 
    $(this).next().fadeIn('slow').mouseleave(function() { 
     $(this).fadeOut('slow'); 
    }); 
    });

$(function() { 
 
    // stock dans des variables 
 
    var dark = $('.hov'); 
 
    var img = $('img'); 
 

 
    // cacher les hover 
 
    dark.hide(); 
 

 
    // montrer au survol de l'image 
 
    img.mouseenter(function() { 
 
    $(this).next().fadeIn('slow').mouseleave(function() { 
 
     $(this).fadeOut('slow'); 
 
    }); 
 
    }); 
 
});

@charset "UTF-8"; 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.col-md-4 { 
 
    padding: 0; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
hr { 
 
    width: 70%; 
 
} 
 
img { 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 
.hov { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 0; 
 
    height: 250px; 
 
    width: 350px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="container"> 
 
     <h1> Ma gallerie photo </h1> 
 
     <hr> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <img src="http://placehold.it/350x250"> 
 
      <div class="hov"></div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <img src="http://placehold.it/350x250"> 
 
      <div class="hov"></div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <img src="http://placehold.it/350x250"> 
 
      <div class="hov"></div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <img src="http://placehold.it/350x250"> 
 
      <div class="hov"></div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <img src="http://placehold.it/350x250"> 
 
      <div class="hov"></div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <img src="http://placehold.it/350x250"> 
 
      <div class="hov"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-07-28 17:28:53 Iceman

Vielen Dank für Ihre Antwort! es ist Arbeit ! –

jQuery .hover() seltsames Verhalten

Antwort

Verwandte Themen