Bootstrap popover在hover状态下移动到弹出层上不消失

最新推荐文章于 2024-01-17 18:57:40 发布

gyuei

最新推荐文章于 2024-01-17 18:57:40 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/106126382

版权

Bootstrap 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在鼠标hover状态下显示弹出层，并确保弹出层内容不消失且可进行操作的方法。通过使用HTML、CSS和JavaScript，详细展示了如何实现这一效果，包括示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：鼠标在hover状态下移动到弹出层，弹出层内容不消失且可以进行其他操作
示例代码如下：
html代码如下:

<li class="hx-list_two" data-container="body" data-toggle="popover" data-placement="left" data-trigger="hover">
	<a href="#">
		<img src="images/fixed_tell@2x.png">
		<span>电话咨询</span>
	</a>
</li>

Js代码如下所示:

$(function() {
	$(".hx-list_two").popover({
		trigger: "manual",
		html: true,
		animation: false,
		content: `<ul class="wehx-popover_box">
			<li class="wehx-popover_item">
				<a href="">
					&emsp;TEL:021-56635722
				</a>
			</li>
			<li class="wehx-popover_item">
				<a href="">
					&emsp;MOB:15001758537
				</a>
			</li>
		</ul>`
	}).on("mouseenter", function() {
		// console.log($(".hx-flot_window li a").css)
		var _this = this; // 这里的this触发的dom,需要存起来 否则在下面 .popover的逻辑中this会变为弹出的dom
		$(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);
	});
});

最终效果：
在这里插入图片描述