悬停关闭时如何关闭引导模式答案

【问题标题】：How to close a bootstrap modal when hover is off悬停关闭时如何关闭引导模式
【发布时间】：2019-02-21 10:07:53
【问题描述】：

当鼠标移到 div 上时，我正在打开引导模式，当鼠标移出 div 时如何关闭此模式？

$(document).ready(function() {
  $("#b1").hover(function() {
    $('#modal1').modal({
      show: true,
      backdrop: false
    });
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h2 class="page-header" data-toggle="modal" data-target="#modal1" id="b1">Move Mouse Here</h2>

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-left">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
        <h4 class="modal-title" id="modal1Label">Left Modal title</h4>

      </div>
      <div class="modal-body">Some Demo For Modal 1</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

api.jquery.com/hover/#hover1 检查hover 可以接受什么参数，然后你会找到答案:)
我认为即使您能够添加悬停功能，它也不会触发，因为模态的元素覆盖了后面的文本。
是的，模态框肯定会覆盖您首先悬停的 DIV，因此悬停在该 DIV 之外是不可能的。此外，悬停显然不适用于移动设备，因此并不理想。

标签： javascript twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

您可以将第二个参数传递给悬停，这也是一个隐藏弹出窗口覆盖的函数

  $("#id").hover(function () {
        $('.test-modal-lg').modal({
            show: true,
            backdrop: false
        }); 
    }, function () {
       $('.test-modal-lg').modal('hide');
    });

【讨论】：