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

Posted 2023-05-08

【中文标题】悬停闪烁时弹出链接（jQuery）

【英文标题】：Popup on hover flickers when over link (jQuery)

【发布时间】：2020-11-19 06:15:31

【问题描述】：

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

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();
            
  );

);

【参考方案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>

【讨论】：

谢谢！以及如何将其与“移动”解决方案混合使用，以便您可以单击这些项目。我有这个代码 $(function() $('.link-box').click(function(e) var $parent=$(this).closest('.about-profile'); $('. about-profile').not($parent).toggleClass('dim'); $('#'+$(this).attr('data-target')).toggle(); ); $(' html').click(function() $('#modal-box').hide(); ); $('.about-profile').click(function(event) event.stopPropagation(); ); );