Question

我想创建一个包含HTML，CSS和＆amp;的图片库。 jQuery。我创建了div，当我的鼠标进入另一个div时出现。但当我的鼠标进入div时，另一个div出现一次，消失，然后再次出现。我该如何解决这个问题？

的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

您正在将addEventListener事件附加到错误的元素。所以改变

mouseleave

到

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

Answer 2

我认为你应该试试这个： https://jsfiddle.net/km3ewek5/1/

（请注意，mouseleave位于dark元素上）

$(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（）奇怪的行为

2 个答案: