如何在元素周围的hower上显示子按钮

Question

我正在为管理面板创建类别树视图，我想在hower上显示元素周围的一些子按钮。我怎么能这样做？

我想要这种

这是我的分类树视图

Answer 1

您的html应该是

<div class="button-container text-center">
<button class="btn btn-default btn-circle soo top"><i class="fa fa-trash"></i></button>         
<button id="subbtnshow" class="btn btn-outline-primary">Help me</button>
<button class="btn btn-default btn-circle soo foo"><i class="fa fa-edit"></i></button>
<button class="btn btn-default btn-circle soo bottom"><i class="fa fa-plus-circle"></i></button>      
</div>

并且css应该是

.button-container{
position:relative;  
padding:35px;
width:fit-content;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
border:1px solid;
}
.soo {
position: absolute;
display: none;
font-size: 20px;
padding: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
}
.soo.top{
top:0px;
}
.soo.bottom{
bottom:0px;
}

.foo {
left:initial;
margin-top:auto;
margin-bottom:auto;
top:0px;
bottom:0px;
}