jQuery .hover（）奇怪的行为

我想创建一个图片库与HTML,CSS & jQuery。我创建了一个div，当我的鼠标进入另一个div时出现。但是当我的鼠标进入div时，其他div出现一次，消失，然后再次出现。我该如何解决？jQuery .hover（）奇怪的行为

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>

来源

2016-07-28 Antonin Mrchd

你能为我们提供一些这种情况下的小提琴吗？ – 3rdthemagical

我猜想下一个元素会与你正在悬停的元素重叠，然后触发mouseleave事件，然后在下一个元素再次隐藏时触发mouseenter事件，等等......也提供相关的CSS。无论如何，你应该将这些事件绑定到'.col-md-4'容器级别 –

对不起，我不明白你的问题！ –

我想你应该试试这个： 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'); 
     }); 
});

来源

2016-07-28 17:31:42 kukkuz

要连接的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; 
 
}

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

来源

2016-07-28 17:28:53 Iceman

非常感谢您的回答！是工作！ –

jQuery .hover（）奇怪的行为

回答

相关问题