懸停和切換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。