Div Отображает изображение, но мигает, когда я наводил на него

Question

У меня есть раздел этого сайта, где, когда я наводил изображение (class="background"), div исчезает (div class="portfolio-hover"). Это работает правильно.

Теперь, когда div исчезает, и я нависаю над самим div, он мигает один раз. Я не могу понять, что происходит.

Вы можете найти его здесь в этой скрипке JS: http://jsfiddle.net/y3ec7sua/1/. Здесь, в разделе «Портфолио», наведите указатель мыши на зеленый квадрат (изображение). Появляется синяя полоска внизу. Теперь, когда я нависаю над синим баром, он моргает. Я уже добавил .stop() в fadeOut, но он все еще мигает. Как я могу заставить его оставаться статичным и не мигать, когда он отображается и зависнет?

Кроме того, любые идеи о том, как я могу получить только поле, которое витает, чтобы показать div, а не все divs, отображаемые сразу?

HTML Раздел изображений и сОн парения

<div id="portfolio" class="container-fluid"> 
      <h1>Portfolio</h1> 
      <div class="row" > 
       <div class="col-sm-4" id="portfolio1"> 
        <div class="portfolio_custom"> 
         <img src="safe.png" class="img-responsive background"> <!-- Background Image --> 
         <div class="portfolio-hover"> <!-- Hover Content --> 
          <img src="yellow_circle.png" class="img-responsive overlay"> 
          <div class="text-hover"> 
           <p>HTML5/CSS3</p> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4" id="portfolio2"> 
        <div class="portfolio_custom"> 
         <img src="cake.png" class="img-responsive background"> <!-- Background Image --> 
         <div class="portfolio-hover"> <!-- Hover Content --> 
          <img src="yellow_circle.png" class="img-responsive overlay"> 
          <div class="text-hover"> 
           <p>HTML5/CSS3/JavaScript/jQuery</p> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4" id="portfolio3"> 
        <div class="portfolio_custom"> 
         <img src="safe.png" class="img-responsive background"> <!-- Background Image --> 
         <div class="portfolio-hover"> <!-- Hover Content --> 
          <img src="yellow_circle.png" class="img-responsive overlay"> 
          <div class="text-hover"> 
           <p>HTML5/CSS3/JavaScript/jQuery</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

JQuery

$(function() { 
    $('.background').hover(function(){ 
     $('.portfolio-hover').fadeIn(100); 
    }, 
    function(){ 
     $('.portfolio-hover').stop().fadeOut(); 
    }); 

}); 

Answer 1

Это потому, что ваш <img src="cake.png" class="img-responsive background"> и <div class="portfolio-hover"> находятся в том же положении (оба ребенок <div class="portfolio_custom"> и относительного).

Итак, когда вы наведите курсор мыши на .background, он делает fadeIn, но в момент, когда вы наведите курсор мыши на .background и если вы переместите мышь немного и парить над .portfolio-hover не будет парить над .background так делает fadeOut, но если в тот же миг вы немного пошевельнете мышкой, он снова навешивается на .background, так что он снова fadeIn.

Что вам нужно сделать, это вызвать функцию hover на родительском объекте, которая равна .portfolio_custom, поэтому она все равно будет нависеть от текущего элемента. Измените код следующим образом:

$('.portfolio_custom').hover(function(){ 

Тогда с только то, что вы будете запускать fadeIn и fadeOut на все .portfolio-hover, так что вам нужно изменить внутри hover к

$('.portfolio_custom').hover(function(){ 
    $(this).find('.portfolio-hover').fadeIn(100); 
}, 
function(){ 
    $(this).find('.portfolio-hover').stop().fadeOut(); 
}); 

Так это было только вызвать fadeIn к .portfolio-hover на парил item

Вот обновленный JSFiddle