悬停和切换jQuery

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

做一个透明的稳定区域，它会捕获你的事件。

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

Answer 2

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

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

这意味着当你通过只有一个功能，它被称为为mouseenter以及mouseleave。您应该使用这些事件或通过两项功能hover

此外，这是非常“倒退”。当你进入它时隐藏东西将永远是一个问题。所以这就是为什么我现在重命名你的div。当您输入#inactive时应显示#active，并且当您离开#active时应隐藏#active。

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

#backgrounddiv正在包装另外两个。 $('#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。