鼠标悬停链接时移除popover的hide类，现有代码失效求解决

嘿，我瞅了下你的代码，很快就发现了几个导致弹窗不显示的问题，咱们一步步来解决：

核心问题1：弹窗元素选择错误 #

你用了doc.find('.popover')，但这个方法是用来查找当前元素内部的后代元素的，而你的.popover是和.myPopover链接同级的相邻元素，完全不在同一个层级里，所以根本找不到目标弹窗！

应该换成doc.next('.popover')，这个方法可以精准获取当前元素的下一个同级弹窗元素。

核心问题2：缺少鼠标移出的隐藏逻辑 #

你只写了鼠标悬停显示弹窗的代码，但没处理鼠标离开后隐藏弹窗的逻辑，这样弹窗会一直留在页面上，体验很差。得给每个链接加上mouseout事件，把弹窗的show类去掉，重新加上hide类。

小问题：弹窗布局异常 #

你的.popover用了position: relative，这会让弹窗占据文档流空间，导致页面布局错位。改成position: absolute就能让弹窗脱离文档流，悬浮在链接旁边，符合弹窗的预期效果。

修复后的完整代码 #

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#" class="myPopover">help</a> 
<div class="popover hide"> 
  <h4>title</h4> 
  <p>content</p> 
</div> 
<a href="#" class="myPopover">help2</a> 
<div class="popover hide"> 
  <h4>title2</h4> 
  <p>content2</p> 
</div>

CSS部分 #

.popover { 
  width: 240px; 
  padding: 10px; 
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15); 
  border: 1px solid rgba(0, 0, 0, .2); 
  z-index: 1000000; 
  position: absolute; /* 改成absolute脱离文档流 */
  top: 10px; 
  transition: opacity 1s; /* 明确过渡属性是opacity，避免不必要的过渡 */
  background-color: #fff; 
} 
.popover.hide { opacity: 0; } 
.popover.show { opacity: 1; }

JavaScript部分 #

$(document).ready(function() { 
  $(".myPopover").each(function() { 
    var $link = $(this); 
    var $popover = $link.next('.popover'); // 获取相邻的弹窗元素
    
    $link.mouseover(function() { 
      $popover.removeClass('hide').addClass('show'); 
    }); 

    // 添加鼠标移出隐藏弹窗的逻辑
    $link.mouseout(function() {
      $popover.removeClass('show').addClass('hide');
    });
  }); 
});

这样修改后，鼠标悬停在每个help/help2链接上时，对应的弹窗就会正常显示，鼠标离开后弹窗也会隐藏，布局也不会错位啦！

内容的提问来源于stack exchange，提问作者elhamb