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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
PHP学习资料汇总与网址
2007/03/16 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php绘制一条弧线的方法
2015/01/24 PHP
js资料prototype 属性
2007/03/13 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
目前最全的python的就业方向
2018/06/05 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python如何变换环境
2020/07/21 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
小学生秋游活动方案
2014/02/23 职场文书
委托书范本
2014/04/02 职场文书
市级文明单位申报材料
2014/05/07 职场文书
六一儿童节致辞
2015/07/31 职场文书
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers