jQuery 冒泡 - MouseOut 问题

Question

Demo Here

我想要实现的目标：

1. 鼠标悬停时 - 将显示共享图标。

2. 点击分享图标，会显示新的Div

问题

当 MouseOut on Share Icon "New Div should not close, it has to be displayed" 时。

当为大图像“新的 Div 必须隐藏”完成 MouseOut 时

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