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


Posted in Javascript onJune 23, 2016

在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,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="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>', //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插件实现鼠标经过显示并保持显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
JavaScript的function函数详细介绍
Nov 20 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 #Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 #Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 #Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 #Javascript
JavaScript自学笔记(必看篇)
Jun 23 #Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 #Javascript
JS使用JSON作为参数实例分析
Jun 23 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP入门速成教程
2007/03/19 PHP
php header()函数使用说明
2008/07/10 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
js opener的使用详解
2014/01/11 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
express框架下使用session的方法
2019/07/31 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
Python 字典与字符串的互转实例
2017/01/13 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python文件操作基本流程代码实例
2017/12/11 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Django框架 信号调度原理解析
2019/09/04 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
大学班长的职责
2014/01/27 职场文书
房产委托公证书样本
2014/04/04 职场文书
教师继续教育反思周记
2015/06/25 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
浅谈Node的内存泄露问题
2022/05/06 NodeJs