如何使用鼠标悬停获取 div id 以显示弹出框?

Posted

技术标签:

【中文标题】如何使用鼠标悬停获取 div id 以显示弹出框?【英文标题】:How to get div id using mouseover to show popover? 【发布时间】:2021-09-02 23:02:22 【问题描述】:

假设,我有很多 div。现在我想显示单独的弹出框,div 明智。我用鼠标悬停。它运作良好。但第一次不工作。当我第二次移动鼠标时,它正在工作。

这是我的代码:

$(document).ready(function() 
  $(".popper").one('mousemove', function() 
    var messageId = this.id;
    console.log(messageId);
    $("#" + messageId).popover(
      placement: 'bottom',
      container: 'body',
      html: true,
      content: function() 
        return $('.popper-content-' + messageId).html();
      
    );
  );
);
body 
  padding: 10px 120px;


.red 
  color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>


<div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div>
<div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div>
<div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div>
<div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>

第一次如何显示弹出框?

请帮忙。

提前致谢!

【问题讨论】:

离题:var messageId = this.id; $("#" + messageId) $(this) 相同(假设您没有重复的 ID) @Dev 我看到你已经撤销了批准。你有什么问题吗?随意写评论。 @BOZ 对不起。这是我的错误。你的回答对我帮助很大。谢谢。 【参考方案1】:

您必须先悬停并手动显示popover(),因为您稍后会构建它。

.popover('show');

示例 sn-p

$(document).ready(function() 
  $(".popper").one('mousemove', function() 
    var messageId = this.id;
    console.log(messageId);
    $("#" + messageId).popover(
      placement: 'bottom',
      container: 'body',
      html: true,
      content: function() 
        return $('.popper-content-' + messageId).html();
      
    ).popover('show');
  );
);
body 
  padding: 10px 120px;


.red 
  color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>


<div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div>
<div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div>
<div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div>
<div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>

【讨论】:

以上是关于如何使用鼠标悬停获取 div id 以显示弹出框?的主要内容,如果未能解决你的问题,请参考以下文章

从 Bootstrap 弹出框访问 div id

div随鼠标移动

CSS如何实现鼠标悬停在图片上底部弹出文字内容?

Bootstrap 3 弹出框在“响应”模式下不起作用

js如何实现鼠标悬浮显示链接

如何在 DIV 中获取元素名称和 ID 的类型