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

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2016-03-24
这篇文章主要介绍了BootStrap使用popover插件实现鼠标经过显示并保持显示框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

实现效果图:

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

html实现:

<a href="#" >
<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 ><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插件实现鼠标经过显示并保持显示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    这篇文章主要介绍了利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper三的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 我的小站地址:我的Bootstrap小站; PS:(问博客园:为什么老是删我 ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
    利用ASP.NETMVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
    这篇文章主要介绍了利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug四的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTM ...
  • 利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站一的相关资料,需要的朋友可以参考下1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效. ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
猜你喜欢