铁雪资源网 Design By www.gsvan.com

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

实现效果图:

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

html实现:

<a href="#" rel="drevil">
<span class="glyphicon glyphicon-shopping-cart"> </span> 购物车
</a>

javascript实现:

$(function(){
$("[rel=drevil]").popover({
trigger:'manual',
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="/UploadFiles/2021-04-02/mr-evil.jpg">

以上所述是小编给大家介绍的BootStrap使用popover插件实现鼠标经过显示并保持显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
bootstrap,popover,bootstrap鼠标经过

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

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

暂无BootStrap使用popover插件实现鼠标经过显示并保持显示框的评论...