jQuery的冒泡 - 鼠標移開問題

Question

Demo Here

什麼蔭努力實現：

1. 鼠標懸停 - 分享圖標將顯示。

2. 在點擊分享圖標的，新的div將顯示

問題

當鼠標移開上分享圖標「新的div應該不緊密，它要顯示」。

當鼠標移開完成的大圖像 「新的div已隱藏」

HTML：

<div class="article_videos_item clrfix"> 
    <div class="article_videos_item_img"> 
     <span class="field-content"> 
      <a href="#"> 
       <img typeof="foaf:Image" src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" width="340" height="226"> 
        <div class="socialIconsWrap"> 
         <div class="social__sharing__icon"> Click Me 
          <div class="social__sharing__content"> 
           On MouseOut of Share Icon, still i have to be shown 
         </div> 
         </div> 
        </div> 
       </a> 
      </span> 
     </div> 
    </div> 

    <h2 style="display:block; border:2px solid; padding:5px; float:left"> 
     What Iam trying to Achieve : <br/> 
     #1. On Mouse Hover - Share Icon will be displayed. <br/> 
     #2. On Click of Share Icon, New Div will be Shown 
     <br/> 
     <b>Issue</b> 
     <br/> 
     When MouseOut on Share Icon "New Div should not close, it has to be displayed" . 
     <br/> 
     When the MouseOut is Done for Big Image "New Div has to Hide" 

    </h2> 

JS：

$(function(){ 
     gwt__features.init(); 
    }); 
    var social__hover__select  = $('.article_videos_item .article_videos_item_img'), 
     social__sharing__icon  = $('.socialIconsWrap .social__sharing__icon'), 
     social__sharing__content = $('.social__sharing__content'); 


    var gwt__features = ({ 
     social__icons : function(){ 

     }, 
     social__hover : function(){ 
      $(social__hover__select).on('mouseover',function(){ 
       $(social__sharing__icon).show(); 
      }); 
     }, 
     social__out : function(){ 
      $(social__hover__select).on('mouseout',function(){ 
       $(social__sharing__icon).hide(); 
       $(social__sharing__content).hide(); 
      }); 
     }, 
     social__click : function(){ 
      $(social__sharing__icon).on('click',function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       $(social__sharing__content).show(); 
      }); 
     }, 
     init : function(){ 
      this.social__icons(), 
      this.social__hover(), 
      this.social__out(), 
      this.social__click(); 
     } 
    }); 

感謝您的幫助！

Answer 1

我已經實現了一個新的條件代碼。如果點擊圖標，則newDiv設置爲1，並顯示newDiv。如果圖標未被點擊，則不會創建newDiv。

$(function(){ 
     gwt__features.init(); 
    }); 
    var social__hover__select  = $('.article_videos_item .article_videos_item_img'), 
     social__sharing__icon  = $('.socialIconsWrap .social__sharing__icon'), 
     social__sharing__content = $('.social__sharing__content'); 

    var newDiv = 0; 


    var gwt__features = ({ 
     social__icons : function(){ 

     }, 
     social__hover : function(){ 
      $(social__hover__select).on('mouseover',function(){ 
       $(social__sharing__icon).show(); 
      }); 
     }, 
     social__out : function(){ 
      $(social__hover__select).on('mouseout',function(){ 
       if(newDiv == 0){ 
        $(social__sharing__icon).hide(); 
        $(social__sharing__content).hide(); 
       } else { 
        $(social__sharing__icon).hide(); 
        $(social__sharing__content).show(); 
       } 
      }); 
     }, 
     social__click : function(){ 
      $(social__sharing__icon).on('click',function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       $(social__sharing__content).show(); 
       newDiv = 1; 
       if(newDiv == 1){ 
        $(social__sharing__content).show(); 
       } 
      }); 
     }, 
     init : function(){ 
      this.social__icons(), 
      this.social__hover(), 
      this.social__out(), 
      this.social__click(); 
     } 
    }); 

Working demo

請讓我知道如果有什麼需要改進的地方。

Answer 2

我加入哈弗內點擊

social__click : function(){ 
      $(social__sharing__icon).on('click',function(e){ 
       e.preventDefault(); 
       $(social__sharing__content).show(); 

       $(social__sharing__icon).on('mouseout',function(){ 
        $(social__sharing__content).show(); 
       }); 
      }); 
     },