Antonin Mrchd Antonin Mrchd - 4 months ago 14
CSS Question

jQuery .hover() strange behavior

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

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>