位置相對推其他家長按鈕

Question

（我真的不知道如何標題這一點。反正！）

我有一對夫婦垂直堆疊的HTML按鈕，我認爲母公司層面的。當你將鼠標懸停在一個按鈕，我有一個div（或子層）出現在按鈕的右側。要強制股利的權利，我使用的位置是：相對的; .​​..

position:relative; 
top:-25px; 
left:200px; 

但懸停按鈕下方的按鈕一樣存在下面的按鈕在div被推下來。

我怎樣才能不顯示被按下的按鈕孩子的div，同時保持母按鈕和子div的頂部一字排開？

這裏有一個的jsfiddle爲例：http://jsfiddle.net/8Mbyu/

Answer 1

思考它的一個晚上之後，我想我可以結合使用絕對定位與通過JavaScript獲取父按鈕的位置：

在行動：http://jsfiddle.net/8Mbyu/8/

.hiddenButtons { /*blue div*/ 
    display:none; 
    background:#0af; 
    width:100px; 
    padding:5px; 
    text-align:center; 
    position:absolute; 
    left:210px; 
} 

和javascript：

$('.parentButton').hover(function() { 
    $('.hiddenButtons').hide(); 
    var childID = '#' + this.id + 'Child'; 
    var rect = document.getElementById(this.id).getBoundingClientRect(); 
    var top = rect.top; 
    $(childID).css("top", top+1); 
    $(childID).show(); 
}); 

謝謝https://stackoverflow.com/a/11396681/1178486！

我願意看到清潔的解決方案。

Answer 2

您不要使用絕對定位還是可以嗎？ jsFiddle這裏。

.hiddenButtons { /*blue div*/ 
    display:none; 
    background:#0af; 
    width:100px; 
    padding:5px; 
    text-align:center; 
    position:absolute; 
    top:9px; 
    left:210px; 
}