BootStrap使用popover插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示并保持顯示框
更新時(shí)間：2016年06月23日 11:27:32 作者：Geomen
這篇文章主要介紹了BootStrap使用popover插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示并保持顯示框的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
在商城里，導(dǎo)航欄的購(gòu)物車展示經(jīng)常需要鼠標(biāo)經(jīng)過時(shí)，顯示已經(jīng)放入購(gòu)物車的商品，bootstrap是沒有直接用的插件的，這個(gè)時(shí)候就可以使用popover這個(gè)插件改造后實(shí)現(xiàn)，具體如下：
實(shí)現(xiàn)效果圖：
html實(shí)現(xiàn)：
<a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 購(gòu)物車 </a>
javascript實(shí)現(xiàn):
$(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插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示并保持顯示框，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了javascript中this的用法,結(jié)合具體實(shí)例形式總結(jié)分析了javascript中this各種常見的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了js仿淘寶和百度文庫的評(píng)分功能的相關(guān)代碼和實(shí)現(xiàn)思路,具有一定的參考價(jià)值，需要的朋友可以參考下2016-05-05
js接收并轉(zhuǎn)化Java中的數(shù)組對(duì)象的方法
下面小編就為大家?guī)硪黄猨s接收并轉(zhuǎn)化Java中的數(shù)組對(duì)象的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
認(rèn)識(shí)Knockout及如何使用Knockout綁定上下文
Knockout簡(jiǎn)稱ko，是一個(gè)輕量級(jí)的javascript類庫，采用MVVM設(shè)計(jì)模式（即Model、view、viewModel），簡(jiǎn)單優(yōu)雅的實(shí)現(xiàn)了雙向綁定，實(shí)時(shí)更新，幫助您使用干凈的數(shù)據(jù)模型來創(chuàng)建豐富的、響應(yīng)式的用戶界面2015-12-12
iframe的onload在Chrome/Opera中執(zhí)行兩次Bug的解決方法
創(chuàng)建iframe對(duì)象，添加load事件， 再將iframe添加到body中。Chrome/Opera中會(huì)造成load事件的handler執(zhí)行兩次。2011-03-03
這篇文章主要介紹了JavaScript 空間坐標(biāo)的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
詳解js私有作用域中創(chuàng)建特權(quán)方法
這篇文章主要為大家詳細(xì)介紹了js私有作用域中創(chuàng)建特權(quán)方法，何為特權(quán)方法，特權(quán)方法就是有權(quán)訪問私有變量和私有函數(shù)的公有方法，感興趣的小伙伴們可以參考一下2016-01-01
如何寫JavaScript才能逼格更高呢？怎樣才能、讓別人一眼看出你不簡(jiǎn)單呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？下面列出一些在JavaScript時(shí)的裝逼技巧，也可說是非常實(shí)用的寫法2020-05-05
雖然說在前端很少有機(jī)會(huì)接觸到算法，大多都交互性的操作，然而從各大公司面試來看，算法依舊是考察的一方面。下面這篇文章就給大家總結(jié)了在前端JS面試中常見的算法問題，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
20170918 前端開發(fā)周報(bào)之JS前端開發(fā)必看
本文給大家分享了最新版js 前端開發(fā)周報(bào)，內(nèi)容非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09