悬停闪烁时弹出链接（jQuery）

Question

我设法用以下代码编写了实验，它或多或少地工作。当您将鼠标悬停在链接上时，应该有一个链接可以打开一个弹出窗口，并使其他链接变暗。

https://jsfiddle.net/sigug/owfknbd6/49/

现在的问题是，当弹出窗口位于链接上方时（这不是问题），它开始闪烁可能是因为“悬停”功能变得“混乱”或其他原因。如何解决这个问题？

<div class="container">
 <a data-target="boxid1" class="link-box"><img src="https://via.placeholder.com/350x65"></a>
</div>
<div class="container">
 <a data-target="boxid2" class="link-box"><img src="https://via.placeholder.com/350x65"></a>
</div>
<div class="container">
 <a data-target="boxid3" class="link-box"><img src="https://via.placeholder.com/350x65"></a>
</div>


<div id="boxid1" class="modal-box">
 Content Box 1
</div>
<div  id="boxid2" class="modal-box">
 Content Box 2
</div>
<div  id="boxid3" class="modal-box">
 Content Box 3
</div>

.container { background: black; color: white; padding: 50px; float: left; border: 1px solid red; margin: 5px; text-align: center; }
.modal-box { display: none; position: absolute; top: 50%;   left: 50%; transform:translate(-50%,-50%); background: blue; color: white; padding: 25px; width: 250px; height: 200px; }
.dim { opacity: 0.3; }

$(function(){

    $('.link-box').hover(function(e){
    var $parent=$(this).closest('.container');  
            $('.container').not($parent).addClass('dim');
      $('#'+$(this).attr('data-target')).show();},
      
          function(e) {
            var $parent=$(this).closest('.container');  
            $('.container').not($parent).removeClass('dim');
                 $('#'+$(this).attr('data-target')).hide();
            }
  );

});

Answer 1

是的，问题是当光标越过弹出窗口时悬停。如果将弹出框移动到锚链接框内，则可以解决问题。

$(function(){

    $('.link-box').hover(function(e){
    var $parent=$(this).closest('.container');  
            $('.container').not($parent).addClass('dim');
      $('#'+$(this).attr('data-target')).show();},
      
          function(e) {
            var $parent=$(this).closest('.container');  
            $('.container').not($parent).removeClass('dim');
                 $('#'+$(this).attr('data-target')).hide();
            }
  );

});

.container {
  background: black;
  color: white;
  padding: 50px;
  float: left;
  border: 1px solid red;
  margin: 5px;
  text-align: center;
}
.modal-box {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  background: blue;
  color: white;
  padding: 25px;
  width: 250px;
  height: 200px;
  z-index: 10;
 }
.dim {
  opacity: 0.3;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
 <a data-target="boxid1" class="link-box"><img src="https://via.placeholder.com/350x65">
 <div id="boxid1" class="modal-box">
 Content Box 1
</div>
 </a>
</div>
<div class="container">
 <a data-target="boxid2" class="link-box"><img src="https://via.placeholder.com/350x65">
 <div  id="boxid2" class="modal-box">
 Content Box 2
</div>
 </a>
</div>
<div class="container">
 <a data-target="boxid3" class="link-box"><img src="https://via.placeholder.com/350x65">
 <div  id="boxid3" class="modal-box">
 Content Box 3
</div>
 </a>
</div>