JQuery Bubbling - выпуск MouseOut

Question

Демо Здесь

Что я пытаюсь достичь:

1. При наведении мыши - появится значок "Поделиться" .

2. При нажатии значка "Поделиться" будет показан новый раздел

вопрос

Когда MouseOut на иконке "Поделиться", "Новый Div не должен закрываться, он должен отображаться" .

Когда MouseOut готов для большого изображения, "Новый 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

Я решил, добавив Hover внутри клика

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

Answer 2

Я реализовал новое условие в коде. Если щелкнуть значок, для 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();
        }
    });

Рабочая демонстрация

Пожалуйста, дайте мне знать, если есть необходимость в улучшении.