化妆格悬停

Question

可见我需要做的div可见悬停

$(document).ready(function() { 
$('.carousel').hover(function() { 

    $(this).parent().next('.semitransparentoverlay').fadeIn('200'); 

}, 

function() { 
    $(this).parent().next('.semitransparentoverlay').fadeOut('200'); 
}); 

}); 

但悬停格变为可见连连
http://jsfiddle.net/n8b65qbb/14/
如何预防它，使股利可见只有一次，然后隐藏它只在mouselive上只有一次？

Answer 1

如果您将鼠标悬停在父级上，并将覆盖图移动到包装内，这将防止覆盖图的淡入触发第二个悬停事件。

HTML，移动覆盖转盘式包装内：

<div class="block-11 block-1"> 
    <div class="carousel-wrapper" id="carousel-1"> 
     <ul class="carousel clearfix"> 
      <li><img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350"/></li> 
     </ul> 
    <div class="semitransparentoverlay"> 
     <input name="" type="button" value="Show all" class="btn-1"/> 
    </div> 
</div> 

jQuery的目标转盘式包装悬停：

$(document).ready(function() { 
    $('.carousel-wrapper').hover(function() { 
     $(this).children('.semitransparentoverlay').fadeIn('200'); 
    }, 

    function() { 
     $(this).children('.semitransparentoverlay').fadeOut('200'); 
    }); 

}); 

更新的链接：http://jsfiddle.net/carasin/1po0acv6/2/

Answer 2

另一个选项将包括只用于悬停的额外div事件，之前旋转木马包装。

$(document).ready(function() { 
    $('.hover-block').hover(function() { 

     $(this).siblings('.semitransparentoverlay').fadeIn('200'); 

    }, 

    function() { 
     $(this).siblings('.semitransparentoverlay').fadeOut('200'); 
    }); 

}); 

检查小提琴：http://jsfiddle.net/benjasHu/d1wg3fe0/