Question

我遇到了鼠标悬停功能的问题，我有一个div，当它悬停在它上面时，它的子div被淡入并在mouseleave上淡出。孩子div显示得很好，但是当你移动鼠标时，它会不停地淡入淡出，这只会令人烦恼。
这里有一个小提琴：http://jsfiddle.net/NK2mt/1/和我的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会逐渐消失，但我似乎无法找到它。

Answer 1

使用'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; 
    });

Answer 2

您可以使用CSS3 transition（FADE效果）

执行相同的操作

.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/

Answer 3

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

基本上，拨打hover

$(selector).hover(handlerIn, handlerOut)

是：

的简写

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

它应该摆脱你的闪烁。

jQuery鼠标悬停功能保持闪烁

3 个答案: