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（）奇怪的行爲

回答

相關問題