javascript - jQuery冒泡-MouseOut问题

Demo Here

我想达到的目标：


鼠标悬停时-将显示共享图标。
单击“共享”图标时，将显示“新股”


问题

当“共享上的MouseOut on”图标“新分区不应关闭，必须显示”。

当MouseOut完成大图显示时，“ New 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();
        }
    });

感谢你的帮助！！

最佳答案

我为代码实现了新条件。如果单击该图标，则将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

如果需要改进，请告诉我。