Javascript 悬停时的编辑按钮

目前我有一个带有悬停覆盖的容器，它会使整个容器变暗。我希望在中间的覆盖物旁边显示一个编辑按钮。

。服务内部{
文字装饰：无；
颜色：白色；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景颜色：浅灰色；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
.service内部：悬停>.overlay{
位置：绝对位置；
显示：块；
排名：0；
宽度：100%；
身高：100%；
左：0；
背景色：黑色；
不透明度：0.8；
z指数：100；
}

在与覆盖层相同的级别上添加一个

div class=“button”

，并为其提供相同的定位属性，但具有更高的

z-index

，然后在与覆盖层

元素相同的悬停状态下激活它

。按钮{
显示：无；
}
.container:hover>.button{
位置：绝对位置；
显示：块；
最高：50%；
宽度：20%；
左：40%；
背景颜色：绿色；
颜色：黑色；
z指数：200；
}
在与覆盖层相同的级别上添加一个
div class=“button”
，并为其提供相同的定位属性，但具有更高的
z-index
，然后在与覆盖层
元素相同的悬停状态下激活它

。按钮{
显示：无；
}
.container:hover>.button{
位置：绝对位置；
显示：块；
最高：50%；
宽度：20%；
左：40%；
背景颜色：绿色；
颜色：黑色；
z指数：200；
}
请随HTML代码一起提供完整的示例代码只是随机的，但该按钮是否可以在默认情况下具有
显示：无
，以及悬停时的
显示：内联块
？@NoobEditor这将不起作用，因为由于显示：无没有组件。因此，hove事件将永远不会被触发。请提供完整的示例代码以及HTML代码。虽然只是随机的，但该按钮是否可以在默认情况下具有
display:none
，并在悬停时具有
display:inline block
。@NoobEditor这将不起作用，因为由于display:none没有组件。所以hove事件永远不会被触发。