jQuery - 在鼠標懸停上交換DIV

Question

懸停在div上時可以執行交換或顯示/隱藏嗎？

例如，說我有兩個div：

<div id="box1">content of box 1</div> 
<div id="box1-hover">you are hovering on this box</div> 

框1應顯示在頁面上，與BOX1懸停隱藏，那麼，當你將鼠標懸停在箱1，BOX1懸停應該成爲visable 超過它的頂部（所以它基本上看起來像一個交換）。然後當你彈出鼠標時，box1-hover會再次隱藏。

這是可行的嗎？如果是這樣，有人可以證明一個jsfiddle？

感謝 扎克

Answer 1

肯定。您需要調查.mouseenter,.mouseleave,.show和.hide。下面的代碼應該可以幫你實現這個目標。

$(document).ready(function() { 
    $("#box1").mouseenter(function() { 
     $("#box1-hover").show(); 
    }).mouseleave(function() { 
     $("#box1-hover").hide(); 
    }); 
}); 

對於CSS，你會想了解z-indices和absolute positioning inside relative positioning。 Z索引指示元素在頁面中的「高」（認爲事物正在向你走來）。相對定位項目中絕對定位的項目絕對是針對父項定位的，而不是頁面。

所需的CSS：

#box1 { 
    z-index: 2; 
    float: left; 
    position: relative; 
} 

#box1-hover { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

注意，對於box1-hover股利嵌套在box1在這種情況下

see it in action

Answer 2

看： http://jsfiddle.net/uQuTt/