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！

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

Child Div的位置相对推动其他父按钮

2 个答案: