AngularJS – Why is ng-mouseleave not woking properly?

I’m posting my code, because for the sake of me, I can’t figure out why ng-mouseenter and ng-mouseleave are not working properly… They fire correctly only when the mouse enters and leaves from the side(left/right) and with the mouseleave still sometimes it doesn’t fire up.. I can’t use css to apply the needed classes, because I have to watch for a ctrl key press event, so I have to stick to the ng-mouseenter/leave. I tried also with ng-mouseover/out – they’re almost not working at all. Any idea why that is and how to fix it? I would be very thankful.

view.html

<div ng-controller="ControlCenterViewController as controlCenter">
   <div class="controlcenter" ng-repeat="cat in controlCenter.categories">
      <div class="controlcenter-category"></div>

      <div class="controlcenter-shortcut" ng-repeat="shortcut in cat.exts"
            ng-click="controlCenter.onSelect(shortcut, $event)" ng-class="class" 
           ng-mouseenter="controlCenter.hoverIn($event, shortcut)" ng-mouseleave="controlCenter.hoverOut($event, shortcut)">
                  <span class="shortcut-remove hidden-shortcut">
                  <clr-icon shape="times-circle" class="is-error" size="12"></clr-icon>
                  </span>
                  <span class=" controlcenter-shortcut-icon-display" ng-if="controlCenter.hasClass(shortcut)"></span>
                  <img class="controlcenter-shortcut-icon" ng-src="" ng-if="!controlCenter.hasClass(shortcut)"/>
               <div data-test-id="" class="controlcenter-shortcut-label"></div>
      </div>
   </div>
</div>

controller.js

    function hoverIn(event, shortcut){
        if(perspectivesService.isEditEnabled()){
            console.log('hover in fired');
            var target = angular.element(event.target).find('span.shortcut-remove');
            if(event.ctrlKey){
                target.removeClass('hidden-shortcut');
                target.addClass('current-shortcut');
            }
        }
    }

    function hoverOut(event, shortcut){
        if(perspectivesService.isEditEnabled()){
            console.log('hover out fired');
            var target = angular.element(event.target).find('span.shortcut-remove');
                target.removeClass('current-shortcut');
                target.addClass('hidden-shortcut');
        }
    }

css

.hidden-shortcut {
   display: none;
}

.current-shortcut {
   display: block !important;
}

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/19/angularjs-why-is-ng-mouseleave-not-woking-properly/
via @lzomedia #developer #freelance #web #lzomedia.com