在父元素 DIV - AngularJs 鼠标移出时隐藏子元素

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>

控制器 JS -

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

要求 -

我想在鼠标指针离开父 DIV 时用 "share-icon" class 隐藏 DIV（即 DIV 和 class ideaResult)，但同时我单击 DIV 名称为 class "shareBtn"，这将导致这三个 DIV 与 [=35= 切换] class 工作正常。

问题 -

加载页面时，这三个 DIV（即 "share-icon" class）已经隐藏，这很好，但是当我单击 DIV使用 class "shareBtn"，出现这些 DIV 也很好，但是当鼠标指针离开父 DIV ("ideaResult") 时，这三个 DIVs 继续出现，这是我不想要的。

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

这是模拟 Fiddle - https://jsfiddle.net/x2zzppoa/

Answer 1

这 3 个 div 的可见性与 class“share-icon”无关，但与 $scope.socialIcon 相关，初始设置为 undefined，在你点击上面的 div 之后它被设置为 true，因此你的 divs 的可见性。

这段代码的解决方案大概是：

ng-mouseleave="socialIcon = false"

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

在父元素 DIV - AngularJs 鼠标移出时隐藏子元素

hide a child element on mouseout of parent DIV - AngularJs

html

javascript

angularjs

ng-show

ng-hide