Javascript 如何将一个覆盖div放置在另一个类似网格设计的悬停div上？

我试图做一个网格状的设计，我想在每个div的悬停上显示一个覆盖

叠加div有两个按钮，应该放在中间

我尝试了下面的代码，我相信逻辑是正确的，但是按钮和覆盖层的位置没有放在图像div的中心

无覆盖的图像

悬停并覆盖

Html

<ul>
    <li>
        <div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>

</ul>

---

。图像大小是可变的，所以固定填充到中间按钮可能不会有帮助。有人能帮我定位覆盖吗？

您首先必须确保您的

.image

和

.overlay

类显示在同一位置。因此，您应该在

ulli

中添加

position:relative

，并在这两个类中添加

absolute:position

一旦有了这些元素，就更容易放置元素：（）

.image{
位置：绝对位置；
左：0；
排名：0；
宽度：150px；
高度：150像素；
}
.覆盖{
位置：绝对位置；
左：0；
排名：0；
宽度：150px；
高度：150像素；
显示：无；
}
ul{列表样式：无；宽度：100%；}
ul li{
显示：内联块；
宽度：160px；
位置：相对位置；
}
李：悬停。覆盖{
显示：块；
背景色：黑色；
不透明度：0.75；
}
.bt1{
背景颜色：橙色；
位置：绝对位置；
宽度：50px；
高度：50px；
左：5%；改变了一些位置，也给了li元素一个高度，因为img更大


您可以将下面的CSS代码用于图像：

position:absolute;
z-index:-1;

z-index属性指定元素的堆栈顺序

具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素的前面

注：z索引仅适用于定位元素（位置：绝对、位置：相对或位置：固定）

我的解决方案：
遇到了这个问题，并创建了我自己的，基于flexbox的解决方案。它可以更好地将按钮居中











.image{
宽度：100px；
高度：100px；
}
.覆盖{
宽度：100%；
身高：100%；
显示：无；
位置：绝对位置；
顶部：0px；
左：0px；
背景色：黑色；
不透明度：0.75；
}
.overlay>div{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
}
ul{列表样式：无；宽度：100%；}
ul li{位置：相对；显示：内联块；宽度：150px；高度：150px；}
李：悬停。覆盖{
显示：块；
}
.bt1{
背景颜色：橙色；
宽度：80px；
高度：80px；
}
.bt2{
背景颜色：绿色；
宽度：50px；
高度：50px；
}
感谢您的回答+1，将父对象设置为
相对对象
，将子对象设置为
绝对对象
，这很好，但我可以知道为什么它会在悬停时闪烁吗？问题是，当您添加覆盖元素时，您不再悬停图像，因为您正在悬停覆盖。因此它永远不会停止在“悬停”和“悬停”之间切换“没有悬停"正确指出可能是另一种显示悬停覆盖图的方法，就像caramba建议的那样。我们应该尝试使用li hover。@Lemoisela确切地说，
。image:hover
应该更改为
li:hover
，正如caramba正确建议的那样！但是仍然对悬停
li
有疑问。overlay
会来的然后我停在
.overlay
上，当我停在
li
什么是
.overlay
div上时，它是怎么想的。我试着用float将顶部值设为按钮，但它不起作用。它可以居中吗？可以在中间第二行添加按钮吗？你能给出一些线索吗@caramba@sun当然，它可以居中，有那些按钮always的大小相同？为什么。css中的图像高度为100px；如果图像高度为150px？是否希望它为100px并剪切其余部分？@sun进行了一些小更新，但没有动态宽度：没有
。图像的高度和宽度仅用于测试目的。
.image
大小是否可以根据其中的实际图像进行更改。C可以这样说，每个网格的高度和宽度都不一样。谢谢
.image{
    position:absolute;
    left:0;
    top:0;
 width:150px;
 height:150px;

}
.overlay{
    position:absolute;
    left:0;
    top:0;
 width:150px;
 height:150px;
 display:none; 
}

ul { list-style: none; width: 100%; }
ul li { 
    display:inline-block; 
    width:160px; 
    position:relative;
}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    left:5%; <-- you may have to play with those values if you want to place them somewhere else
    top:30%; <--  same as above
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    right:5%;
    top:30%;
}

.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100%;
 height:100%;
display:none;
    position:absolute;
    top:0px;
    left:0px;
}
.overlay div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 0;
}
ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;
}
.bt1 {
    background-color:orange;
    width:50px;
    height:50px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

position:absolute;
z-index:-1;