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