bootstrap 中popover的鼠标悬停下拉菜单效果

这两天想要做个类似前端网登陆后滑过头像显示个人信息的效果。期间遇到不少问题，记录下来方便以后查找。

html相关

1、为了实现通用性，我在元素上加上了mypop的class和contentdiv属性具体html代码如下

<span class= "mypop" contentdiv ="#pop-infoDiv"> 测试</span ><pre name="code" class="html">

contentdiv表示的是要显示的popover的div的id（或者其他jquery的选择也可以）

2、使自定义的显示div隐藏

 <div id="pop-infoDiv"  hidden>       <div>< a href=" /view/back/sys"> 系统设置</a ></div>       <div><img src="eg.jpg"></div> </div >

js相关

现在就是js部分了，设定一个base.js,然后引入就可以了

$(function(){     $( document ).on("mouseover" ,".mypop" ,function(){          var obj=$(this);          obj.popover({             content: function() {                 return $($(this).attr("contentdiv" )).html();            },            html: true,            placement: 'bottom'         });         var _this = this ;         obj.popover("show" );         $( ".popover" ).on("mouseleave" , function () {            obj.popover( 'hide');         });     });     $( document ).on("mouseout",".mypop" ,function(){        <pre name="code" class="html">         var obj=$(this);         setInterval( function () {             if (!$(".popover:hover" ).length) {                 obj.popover( "hide")             }         }, 100);     });    });

在这里主要遇到两个问题，

1、$( document ).on("mouseout",".mypop" ,function(){ });

这里我开始用的$( ".mypop" ).on("mouselout" , function () {)};但是无效，具体什么原因我也不是很清楚，希望有看到能帮我解惑

2.、在鼠标滑出popover的显示div时

 $( ".popover" ).on("mouseleave" , function () {            obj.popover( 'hide');         });

我原本用的mouseout，结果出现不停闪烁的现象，在网上查了资料才知道

a、鼠标指针离开是任何子元素，都会触发 mouseout 事件。

b、只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

最后，在完成这部分效果的过程中参考了

http://my.oschina.net/geomen/blog/178359

http://www.cnblogs.com/jenney-qiu/archive/2012/02/10/2345338.html