在div的悬停时，Overlay闪烁和按钮不响应

Question

下图显示了当用户在div上盘旋时所需的场景，覆盖div应该表现得更多，如叠加层或稀松布。

所以，我能够实现类似的功能，但它会破坏。

问题是，当有人在特定的div上盘旋时，重叠的div会闪烁很多。除此之外，当我试图点击EDIT div（按钮）时，没有回调。我认为是因为z-index，但那个din也没有用。我试图简化我的问题并创建了一个小提琴。

FIDDLE

HTML：

＆＃13;

＆＃13;

//jQuery

$('.edit').on('click',function(){
  alert('CLICKED');
});

＆＃13;

/*CSS*/

#maillistpar{
  position: relative;
  width: 300px;
  max-height: 170px;
  margin: auto auto;
}
.mailcover{
  width: 300px;
  height: 170px;
  border: 2px solid black;
  margin: 2px;
}
.overlay{
  width:100%;
  height:100%;
  display:none;
  position:absolute;
  top:0px;
  left:0px; 
}
.overlay div {
  position:relative;
  top:30%;
  z-index: 10;
}
.mailcover:hover+.overlay{
  background-color:black;
  opacity: 0.75;
  display: inline-block;
}
.edit {
  background-color:orange;
  width:50px;
  height:50px;
  border-radius: 30px;
  margin: 0 auto;
}

＆＃13;

<!--HTML-->

<div id='maillistpar'>
  <div class='mailcover'>
    <label class='lead'>A: </label><input id='email' style='float:right;'>
    <div style='clear:both'></div>
    <label class='lead'>B: </label><input id='desc'  style='float:right;'>
    <div style='clear:both'></div>
    <label class='lead'>C: </label><input id='weblab' style='float:right;'>
    <div style='clear:both'></div>
    <label class='lead'>D: </label><input id='bulls' class='form-control' style='float:right;'>
    <div style='clear:both'></div>
  </div>
  <div class="overlay">
    <div class="edit">EDIT</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

提供一些有用的建议会很棒。谢谢！

Answer 1

问题在于，当您将鼠标悬停在.mailcover .overlay上时，因此悬停事件不再有效，.overlay会消失，从而触发{{1}上的悬停事件再次.mailcover重新出现。这导致闪烁效果。要解决此问题，请将适用于.overlay的{​​{1}}事件添加到:hover：

＆＃13;

＆＃13;

.mailcover

＆＃13;

.overlay

＆＃13;

$('.edit').on('click', function() {
  alert('CLICKED');
});

＆＃13;

＆＃13;

＆＃13;