BootStrap使用popover插件實現(xiàn)鼠標(biāo)經(jīng)過顯示并保持顯示框

更新時間：2016年06月23日 11:27:32 作者：Geomen

這篇文章主要介紹了BootStrap使用popover插件實現(xiàn)鼠標(biāo)經(jīng)過顯示并保持顯示框的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

在商城里，導(dǎo)航欄的購物車展示經(jīng)常需要鼠標(biāo)經(jīng)過時，顯示已經(jīng)放入購物車的商品，bootstrap是沒有直接用的插件的，這個時候就可以使用popover這個插件改造后實現(xiàn)，具體如下：

實現(xiàn)效果圖：

html實現(xiàn)：

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

javascript實現(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插件實現(xiàn)鼠標(biāo)經(jīng)過顯示并保持顯示框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

window.print()前端實現(xiàn)網(wǎng)頁打印功能詳解
JavaScript 函數(shù)window.print()可用于打印你的應(yīng)用的內(nèi)容,但是它針對的是使用默認(rèn)打印體驗打印顯示在屏幕上的內(nèi)容,這篇文章主要給大家介紹了關(guān)于window.print()前端實現(xiàn)網(wǎng)頁打印功能的相關(guān)資料,需要的朋友可以參考下
2024-04-04
javascript實現(xiàn)留言板功能
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
js實現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法
這篇文章主要介紹了js實現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法,涉及javascript鼠標(biāo)操作及css修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
詳解JS如何使用Promise緩存網(wǎng)絡(luò)請求
網(wǎng)絡(luò)請求是現(xiàn)代Web應(yīng)用中的常見操作,很多時候需要獲取服務(wù)器上的數(shù)據(jù),在進(jìn)行網(wǎng)絡(luò)請求時,為了減輕服務(wù)器的壓力,緩存策略常被用來避免對同一數(shù)據(jù)的重復(fù)請求,本文將探討如何使用Promise結(jié)合緩存來高效處理網(wǎng)絡(luò)請求,需要的朋友可以參考下
2023-12-12
JavaScript實現(xiàn)搜索聯(lián)想關(guān)鍵字高亮功能
本文將詳解如何利用原生js+css+html實現(xiàn)的輸入框搜索聯(lián)想的功能，并集搜索關(guān)鍵字高亮效果，文中的示例代碼講解詳細(xì)，需要的可以參考一下
2022-06-06
企業(yè)微信掃碼登錄網(wǎng)頁功能實現(xiàn)代碼
這篇文章主要介紹了企業(yè)微信掃碼登錄網(wǎng)頁功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-01-01
JS?生態(tài)系統(tǒng)加速Polyfill函數(shù)使用實例探索
這篇文章主要介紹了JS?生態(tài)系統(tǒng)加速Polyfill函數(shù)使用實例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01
JS前端組件設(shè)計以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考
這篇文章主要為大家介紹了JS前端組件設(shè)計以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
配置Grunt的Task時通配符支持和動態(tài)生成文件名問題
這篇文章主要介紹了配置Grunt的Task時通配符支持和動態(tài)生成文件名問題,需要的朋友可以參考下
2015-09-09
JavaScript中訪問id對象屬性的方式訪問屬性(實例代碼)
下面小編就為大家?guī)硪黄狫avaScript中訪問id對象屬性的方式訪問屬性(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10