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

时间：2022-02-28 23:34:01

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

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
 


标签：
相关文章