超过 link (jQuery) 时悬停弹出窗口闪烁

Question

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

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

<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

是的，问题是鼠标悬停在弹出窗口上时。如果将弹出窗口移动到锚点 link-box 内，问题就会解决。

$(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>

超过 link (jQuery) 时悬停弹出窗口闪烁

Popup on hover flickers when over link (jQuery)

jquery

css

popup

hover

flicker