BootStrap使用popover插件实现鼠标经过显示并保持显示框

发布时间：2020-12-18 00:52:16 所属栏目：安全来源：网络整理

导读：在商城里，导航栏的购物车展示经常需要鼠标经过时，显示已经放入购物车的商品，bootstrap是没有直接用的插件的，这个时候就可以使用popover这个插件改造后实现，具体如下：实现效果图： html实现： javascript实现: ',//this is the top title bar of the p

在商城里，导航栏的购物车展示经常需要鼠标经过时，显示已经放入购物车的商品，bootstrap是没有直接用的插件的，这个时候就可以使用popover这个插件改造后实现，具体如下：

实现效果图：

html实现：

javascript实现:

',//this is the top title bar of the popover. add some basic css html: 'true',//needed to show html of course content : '

',//this is the content of the html box. add the image here or anything you want really. animation: false }).on("mouseenter",function () { var _this = this; $(this).popover("show"); $(this).siblings(".popover").on("mouseleave",function () { $(_this).popover('hide'); }); }).on("mouseleave",function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide") } },100); }); });

以上所述是小编给大家介绍的BootStrap使用popover插件实现鼠标经过显示并保持显示框。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!