Question

我想要实现的目标：

鼠标悬停 - 将显示共享图标。
点击分享图标，将显示新Div

问题

当MouseOut on Share Icon“New Div不应关闭时，必须显示”。

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

感谢您的帮助!!

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

jQuery冒泡 - MouseOut问题

2 个答案: