jquery - 在 div 悬停时，Overlay 闪烁并且按钮没有响应

Question

下图显示了当用户将鼠标悬停在 div 上时所需的场景，覆盖 div 应该表现得更像覆盖层或稀松布。

到目前为止，我能够实现类似的功能，但它会中断。

问题是，当有人将鼠标悬停在特定的 div 上时，覆盖的 div 会频繁闪烁。除此之外，当我尝试单击 EDIT div(按钮)时，没有进行任何回调。我认为是因为 z-index，但这也没有用。我试图简化我的问题并创建了一个 fiddle 。

FIDDLE

HTML:

//jQuery

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

/*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;
}

<!--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>

如果有一些有用的建议会很棒。谢谢!

Answer 1

问题是，当您将鼠标悬停在 .mailcover 上时，.overlay 会屏蔽它，因此悬停事件不再有效，.overlay然后消失，再次触发 .mailcover 上的悬停事件，因此 .overlay 重新出现。这导致闪烁效果。要解决此问题，请将应用于 .mailcover 的 :hover 事件也添加到 .overlay:

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

    #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,
    .overlay:hover {
      background-color: black;
      opacity: 0.75;
      display: inline-block;
    }
    .edit {
      background-color: orange;
      width: 50px;
      height: 50px;
      border-radius: 30px;
      margin: 0 auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>