AngularJS ng-mouseenter 在子 div 中不起作用

Question

我一直在使用 AngularJS ng-mouseenter 和 mg-mouseleave，这几乎是我死亡的原因。快速解释：

<div class="characterSum">
    <div class="avatarContainer" ng-mouseenter="showButton = true" ng-mouseout="showButton = false">
        <img ng-src="{{imagePath}}" class="img-thumbnail">
        <div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
            <button class="btn-btn-default">
            Add Character Image
            </button>
        </div> 
    </div>
</div>

CSS 属性：

.avatarContainer {
    max-width: 150px;
    max-height: 150px;
    display:inline-block;
    float:left;
    margin-right:5px;
    position:relative;
}

.characterSum {
    border: 1px;
    min-height:160px;
    position:relative;
}

我相当肯定这与我的 CSS 属性有关。我按照一些说明自动将图像缩放为 150 x 150 大小，这样就可以解释我对这些向导的 CSS 属性。反正我之所以觉得跟它有关系，是因为当我加这个的时候：

<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">Hi</div>

我将它添加到父类“characterSum”下，当我将鼠标悬停在 Hi 上时，按钮显示。一旦我在子 div 类“avatarContainer”下添加它，它就会停止工作。如果我用这个 div 包装整个 avatarContainer 类，那么：

<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">
    HI
    <div class="avatarContainer"> ......... </div>
</div>

它只在我靠近 hi 时显示按钮。每当 showButton 发生变化时，我都会在 showButton 上添加 $scope.$watch 到 console.log('detected') >

有人知道我受到了什么疯狂的诅咒吗？或者如果没有，我愿意使用任何其他方式来实现这一点。 （基本上希望按钮在 img 鼠标悬停时显示）。而且我已经尝试将 ng-mouseover 直接应用于 img 元素，但无济于事。

Answer 1

你有一个错字，你需要使用ng-mouseleave而不是ng-mouseout

标记

<div class="characterSum">
    <div class="avatarContainer" ng-mouseenter="showButton = true" 
     ng-mouseleave="showButton = false">
        <img ng-src="{{imagePath}}" class="img-thumbnail">
        <div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
            <button class="btn-btn-default">
            Add Character Image
            </button>
        </div> 
    </div>
</div>