我正在使用 Bootstrap 弹出窗口创建一个显示用户信息的悬停卡，我在鼠标悬停在按钮上时触发它。我想在弹出窗口本身悬停时让这个弹出窗口保持事件状态，但是一旦用户停止将鼠标悬停在按钮上，它就会消失。我该怎么做？
$('#example').popover({
html : true,
trigger : 'manual',
content : function() {
return '<div class="box">Popover</div>';
}
});
$(document).on('mouseover', '#example', function(){
$('#example').popover('show');
});
$(document).on('mouseleave', '#example', function(){
$('#example').popover('hide');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>最佳答案
使用下面的代码片段进行测试:
小修改(来自 vikas 提供的解决方案)以适合我的用例。
- 在弹出框按钮的悬停事件上打开弹出框
- 将鼠标悬停在弹出框上时保持弹出框打开
- 在鼠标离开时关闭弹出框按钮或弹出框的弹出框。
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
<p class='text-muted'>KISS = Keep It Simple S....</p>
<p class='text-primary'>Goal:</p>
<ul>
<li>Open popover on hover event for the popover button</li>
<li>Keep popover open when hovering over the popover box</li>
<li>Close popover on mouseleave for either the popover button, or the popover box.</li>
</ul>
<button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
HOVER OVER ME
</button>
<br><br>
<button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
HOVER OVER ME... Again!
</button><br><br>
<button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
Okay one more time... !
</button>
<br><br>
<p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
<script src="script.js"></script>
</body>
</html>关于jquery - 如何在悬停时让 Bootstrap 弹出窗口保持事件状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15989591/