我遇到了一个问题,需要在弹出框/工具提示中打开链接。当我将鼠标悬停在图片上时,弹出框会显示出来。但是当我离开图片时,弹出框就消失了(显然)。我尝试使用mouseenter和mouseleave,但失败了。
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
trigger: 'hover',
content: function() {
return `
<p class="description">Dummy text</p>
<a href="/film">Link</a>`
}
});
$('[data-toggle="popover"]').bind({
mouseover: function () {
clearInterval(timeoutId);
$('[data-toggle="popover"]').show();
},
mouseleave: function () {
timeoutId = setTimeout(function () {
$('[data-toggle="popover"]').hide();
}, 1000);
}
});
});
p.description{
font-size: 0.7rem;
color: black;
margin-bottom: 0;
}
.popover {
top: 40px !important;
}
div.popover-body{
padding-bottom: 5px;
padding-top: 5px;
}
h5{
font-size: 1rem;
color: white;
}
img.poster {
opacity: 1.0;
&:hover {
opacity: 0.5;
transition: all .2s ease-in-out;
}
}
<div class="col-4 text-center">
<a href="/"><img class="img-fluid poster" data-toggle="popover" src="http://www.cutestpaw.com/wp-content/uploads/2011/11/friend.jpg">
<h5 class="card-title mt-3">Test</h5>
</a>
</div>
编辑:我的更新代码: 更新的代码