Question

我有两个div：蓝色的红色。 我希望当用户将红色悬停在此fadeOut上并悬停背景时（当他突然出现时）红色淡入淡出。（对我来说更令人惊讶的是，红色渐变不是当我悬停背景但是当我将它放在鼠标中时？我不明白）

生活中的例子：http：//jsfiddle.net/DpD8S/

HTML：

<div id="background">
    <div id="red"></div>
    <div id="blue"></div>
</div>

CSS：

#red{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:red;
    cursor: pointer;
    z-index: 1; 
    }

#blue{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:blue;
    cursor: pointer; 
    }

#background{
    position: relative;
    margin: 0 auto;
    width:300px;
    height: 300px;
    border: 1px solid;
    border-color:#CCC;
    text-align: center;
    cursor: pointer;  }

JQUERY：

$(function(){      
    $("#red").hover(function() {
        $("#red").fadeOut();
    });

    $("#background").hover(function() {
        $("#red").fadeIn("normal");
    });   
})

Answer 1

您的问题可能是hover的定义。

hover( handlerIn(eventObject) , handlerOut(eventObject)  )
hover( handlerInOut(eventObject)  )

这意味着当您只传递一个函数时，它会调用mouseenter以及mouseleave。您应该使用这些事件或将两个函数传递给hover

这也是“倒退”。当你输入它时隐藏东西将永远是一个问题。所以这就是我现在重命名你的div的原因。您应该在输入#active时显示#inactive，并在离开#active时隐藏#active。

这是一个小提琴http://jsfiddle.net/MwQaf/1/

Answer 2

也许您更愿意改变： $("#background").hover(...) 至 $("#blue").mouseleave(...)

http://jsfiddle.net/DpD8S/18/

Answer 3

#background div正在包装其他两个。只要在$('#background').hover()上发生hover事件，即使是其子女，也会调用#background函数。

我相信你可以achieve what you want by doing this：

$("#red").mouseenter(function() {
    $(this).fadeOut();
});

$("#red, #blue").mouseleave(function() {
    $("#red").fadeIn("normal");
});

然而，这会产生奇怪的行为，因为两个“淡入淡出”动画排队。如果用户快速进出，div似乎没有响应，并以奇怪的方式动画。

如果可以选择安装插件，则可以try this plugin to animate colors。这样您甚至可以将元素数量减少到div本身。您还可以减少CSS并使用更清晰的JavaScript。 Check out the fiddle

Answer 4

制作一个透明的稳定区域，可以捕捉到你的活动。

<div id="background">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="transparent"></div>
</div>

CSS：

#red{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:red;
    cursor: pointer;
    z-index: 1; 
    }

#blue{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:blue;
    cursor: pointer; 
    }

#transparent {
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:none;
    cursor: pointer; 
    z-index: 2; 
    }

#background{
    position: relative;
    margin: 0 auto;
    width:300px;
    height: 300px;
    border: 1px solid;
    border-color:#CCC;
    text-align: center;
    cursor: pointer; 
}

然后使用hover（function（），function（））。不要忘记在那里停止执行事件功能：

$(function(){      
    $("#transparent").hover(function() {
        $("#red").stop().fadeOut();
    }, function() {
       $("#red").fadeIn("normal");
    });

})

http://jsfiddle.net/DpD8S/14/

Answer 5

悬停功能通常定义如下 -

$('#red').hover(function() {
    $(this).fadeOut();
}, function() {
    $(this).fadeIn();
});

第一个函数是.hover（）的mouseenter部分。第二个功能是悬停的mouseleave部分。在您的情况下，背景div似乎无关紧要。

在jQuery中悬停和切换

5 个答案: