jQuery鼠标悬停功能保持闪烁

我有一个鼠标悬停功能的问题，我有一个div，当它悬停在它上面时，它的子div被淡入，并在mouseleave上淡出。小孩的div显示得很好，但是当你将鼠标移动到另一个时，它会一直出现，并且只是令人烦恼。
这里有一个小提琴：http://jsfiddle.net/NK2mt/1/和我的jQuery的功能在这里太：jQuery鼠标悬停功能保持闪烁

jQuery(document).ready(function(){ 

jQuery(".hover").hide(); 

    jQuery('.grid-block').mouseover(function() { 
     jQuery(this).children('.hover').stop(true, true).fadeIn(); 
     }); 

    jQuery('.grid-block').mouseout(function() { 
     jQuery(this).children('.hover').stop(true, true).fadeOut(); 
     }); 
     return false; 
});

它，当你在.block-text-sub的DIV淡出，并在再次移动鼠标，但我似乎无法找到它的修复。

来源

2013-02-19 user1374796

使用'mouseenter'代替'mouseover'和'mouseleave'而不是'mouseout'，当你使用'mouseout'时，每当'mouseout'出现在主div的任何内部元素上时都会触发，'mouseover '：

jQuery(document).ready(function(){ 

    jQuery(".hover").hide(); 

     jQuery('.grid-block').mouseenter(function() { 
      jQuery(this).children('.hover').stop(true, true).fadeIn(); 
      }); 

     jQuery('.grid-block').mouseleave(function() { 
      jQuery(this).children('.hover').stop(true, true).fadeOut(); 
      }); 
      return false; 
    });

来源

2013-02-19 21:19:08 luckystars

你可以做CSS3 transition（淡入淡出效果）相同

.grid-block:hover .hover { 
    opacity: 1; 
} 
.grid-block .hover { 
    transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out; 
    -webkit-transition: opacity .5s ease-in-out; 
    opacity: 0; 
}

DEMO：http://jsfiddle.net/NK2mt/3/

来源

2013-02-19 21:16:33

您应该使用hover而不是mouseover。它将mouseenter和mouseleave事件的处理程序绑定在一起。

基本上，调用hover

$(selector).hover(handlerIn, handlerOut)

是的缩写：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

应该摆脱你的闪烁。

来源

2013-02-19 21:16:51 lifetimes

jQuery鼠标悬停功能保持闪烁

回答

相关问题