Question

HTML -

<div class="col-md-3" ng-repeat="idea in ideas">
    <div class="col-md-12 ideaResult" ng-mouseleave="hideIcon()">         
                <a class="resultCover col-md-12" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.coverImage}});"></a>    
                <div class="sharebtn icon-btn" ng-click="socialIcon = !socialIcon">  
                        <span style="background-image:url('/images/idea/share-add.png');background-color:white" title="Share" class="iconContainer"></span>
                </div>
                <div class="share-fb share-icon" ng-show="socialIcon">              
                        <span class="iconContainer" title="Share" style="background-image:url('/images/idea/fb-icon.png');background-color:white"></span>
                </div>
                <div class="share-tw share-icon" ng-show="socialIcon">
                        <span class="iconContainer" title="Share" style="background-image:url('/images/idea/twitter-icon.png');background-color:white"></span>
                </div>
                <div class="share-msg share-icon" ng-show="socialIcon">     
                        <span class="iconContainer" title="Share" style="background-image:url('http://cdn.thegadgetflow.com/wp-content/themes/thegadgetflow4/images/email-icon.png');background-color:white"></span>
                </div>  
                <div class="endorse-icon icon-btn">      
                        <span style="background-image:url('/favicons/favicon-96x96.png');background-color:white" title="Endorse" class="iconContainer"></span>
                </div> 
                <div class="resultIcon">
                    <span title="my goal" class="iconContainer" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.goalIcon}});background-color:{{idea.backgroundColor}}">
                    </span>    
                </div>
                <h2 class="resultName"><a href="/{{idea.customUrl}}">{{idea.title}}</a></h2>                      
                <div class="col-md-12 resultDescription"><p>{{idea.description | limitTo: 48}}{{idea.description.length > 48 ? '...' : ''}}<a href="/{{idea.customUrl}}">Continue Reading</a></p></div>                        
            </div>
 </div>

Controller JS -

$scope.hideIcon = function(){ 
    $scope.socialIcon = false;       
};

要求 -

我想用＆＃34; share-icon＆＃34;隐藏DIV。当鼠标指针离开父DIV时（即具有类ideaResult的DIV），但同时我点击带有类名的DIV＆＃34; shareBtn＆＃34;这将导致用＆＃34; share-icon＆＃34;切换这三个DIV。工作正常的班级。

问题 -

当页面被加载时，这三个DIV（即＆＃34; share-icon＆＃34;类）已经被隐藏了，这很好，但是当我点击DIV时使用类＆＃34; shareBtn＆＃34; ，这些DIV看起来也很好，但当鼠标指针离开父DIV时（＆＃34; ideaResult＆＃34;），这三个DIV继续出现，我不想要。

有人可以帮我解决这个问题吗？提前致谢

这是模拟小提琴 - https://jsfiddle.net/x2zzppoa/

Answer 1

这3个div的可见性与“share-icon”类无关，但与$scope.socialIcon无关，初始设置为undefined，并且在您单击上部div后它被设置为true，因此你的div的可见性。

此代码段的解决方案可能是：

ng-mouseleave="socialIcon = false"

https://jsfiddle.net/ronapelbaum/x2zzppoa/1/

在父DIV的鼠标输出上隐藏子元素 - AngularJs

1 个答案: