jQuery Bubbling - MouseOut Issue

Question

Demo Here

What Iam trying to Achieve :

1. On Mouse Hover - Share Icon will be displayed.

2. On Click of Share Icon, New Div will be Shown

Issue

When MouseOut on Share Icon "New Div should not close, it has to be displayed" .

When the MouseOut is Done for Big Image "New Div has to Hide"

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();
        }
    });

Appreciate your help!!

Answer 1

I've implemented a new condition to the code. If the icon is clicked, then newDiv is set to 1 and newDiv is being shown. If the icon is not clicked, then no newDiv will be created.

$(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

Please let me know if there is any need for improvement.

Answer 2

I solved by Adding Hover inside click

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();
                });
            });
        },