0

我有两个 div：蓝色上的红色。我希望当用户悬停红色时这个 fadeOut 和悬停在背景上时（当他走出蓝色时）红色的 fadeIn。（更令我惊讶的是，红色的淡入不是当我悬停背景而是当我鼠标离开它时？我不明白）

这里的例子生活：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;  }

查询：

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

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

5 回答 5

2

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

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

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

这也几乎是“倒退”。输入时隐藏某些内容始终是个问题。所以这就是我现在重命名你的 div 的原因。进的时候要显露，走的#active时候要#inactive藏起来。#active#active

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

于 2012-12-18T15:00:32.027 回答
2

制作一个透明的稳定区域，以捕捉您的事件。

<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; 
}
​

然后使用悬停（函数（），函数（））。不要忘记在那里停止执行事件函数：

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

})​

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

于 2012-12-18T15:18:38.570 回答
1

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

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

于 2012-12-18T15:01:42.893 回答
1

正在包裹另外#background div两个。每当事件发生时，您的$('#background').hover()函数就会被调用，甚至是它的子事件。hover#background

我相信你可以通过这样做来实现你想要的：

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

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

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

如果安装插件是一个选项，你可以试试这个插件来动画颜色。这将允许您甚至将元素的数量减少到仅其div本身。您还可以减少 CSS 并使用更简洁的 JavaScript。看看小提琴。

于 2012-12-18T15:18:06.250 回答
0

悬停功能通常是这样定义的 -

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

第一个函数是 .hover() 的 mouseenter 部分。第二个功能是悬停的鼠标离开部分。在您的情况下，背景 div 似乎与问题无关。

于 2012-12-18T15:07:20.180 回答