Question

抱歉这个愚蠢的头衔，我想不出别的，如果有人已经问过这件事，我很抱歉，我找不到了。

无论如何，我正在使用jQuery创建一个库。我在div中有一个div和一张图片以及上一个/下一个按钮。按钮位于图片上方，我希望它们默认隐藏，当我将鼠标移到div上时淡入淡出，当我将鼠标移出div时淡出。问题是当我将鼠标从图片移动到按钮时，javascript将其注册为mouseout事件，即使我实际上没有留下保存图片和按钮的div。我快速地告诉你发生了什么：http://jsfiddle.net/7Ppbm/

有没有人能解决这个问题？感谢

Answer 1

您应该使用hover功能：

$("#button").hide();

$("#container").hover(function(){
    $("#button").fadeIn();
},function(){
    $("#button").fadeOut();
});

Answer 2

你所缺少的是一个超时，它会让它一次又一次地消失。另外，请注意使用jQuery 1.7.2

的新.on()

$("#button").fadeOut();
var timer;

$("#container img").on({
    mouseover: function () {
        clearTimeout(timer);
        $("#button").fadeIn();
    },
    mouseout : function () {
        timer = setTimeout(function () { 
            $("#button").fadeOut();
        }, 100);
    }
});

jsFiddle updated

Answer 3

为什么不用CSS过渡呢？除了IE＆lt; 10。 http://caniuse.com/#search=transition

您的示例已修改： http://jsfiddle.net/b4e4M/

使用鼠标移出/移出div淡入/淡出div中的元素

3 个答案: