jQuery .hover() strange behavior

Question

I want to create an image gallery with HTML , CSS & jQuery . I created a div which appears when my mouse enters on another div . But when my mouse enters on the div , the other div appears one time, disappears, and then appears again. How do I fix this?

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>

Answer 1

You are attaching the mouseleave event to the wrong element. So change

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

to

  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>

Answer 2

I think you should try this: https://jsfiddle.net/km3ewek5/1/

(Note the mouseleave is on the dark element)

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

jQuery .hover() strange behavior

Question

2 answers

solution1
1 2016-07-28 17:28:53

solution2
1 ACCPTED 2016-07-28 17:31:42

jQuery .hover() strange behavior

Question

2 answers

solution1 1 2016-07-28 17:28:53

solution2 1 ACCPTED 2016-07-28 17:31:42

solution1
1 2016-07-28 17:28:53

solution2
1 ACCPTED 2016-07-28 17:31:42