css - 子 Div 的相对位置推动其他父按钮

Question

（我真的不知道如何命名这个。无论如何！）

我有几个垂直堆叠的 HTML 按钮，我认为它们是父级。当您将鼠标悬停在按钮上时，按钮右侧会出现一个 div（或子级别）。为了强制 div 向右，我使用 position:relative;...

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

但是悬停按钮下方的按钮被按下，就像按钮下方存在的 div 一样。

如何在不按下按钮的情况下显示子 div，同时保持父按钮和子 div 的顶部对齐？

这里以 jsfiddle 为例：http: //jsfiddle.net/8Mbyu/

Answer 1

你反对使用绝对定位还是可以？jsFiddle在这里。

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

Answer 2

经过一夜的思考，我想我可以将绝对定位与通过 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！

我愿意看到更清洁的解决方案。