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鼠標懸停功能保持閃爍

回答

相關問題