0

我在使用鼠标悬停功能时遇到问题，我有一个 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-subdiv 上淡出并再次淡入时，我似乎无法找到解决方法。

4

3 回答 3

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; 
    });
于 2013-02-19T21:19:08.360 回答
0

你可以用 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;
}

演示：http: //jsfiddle.net/NK2mt/3/

于 2013-02-19T21:16:33.433 回答
0

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

基本上，调用hover

$(selector).hover(handlerIn, handlerOut)

是以下的简写：

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

它应该摆脱你的闪烁。

于 2013-02-19T21:16:51.967 回答