title: MouseEnter vs MouseOver in AngularJs
body: <p>I was playing with AngularJS mouse events and got into a problem. I know <strong><em>MouseEnter</em></strong> event is fired when mouse enters container of an element and there after <strong><em>MouseOver</em></strong> is fired for all child elements.
  Thanks to this animation <a href="http://bl.ocks.org/mbostock/5247027">Visualizing mouse events</a></p>
  
  <p>However turns out that in my case MouseEnter event is never fired. I  am working on Angular PhoneCat application (step-10) and did following modifications:</p>
  
  <ol>
  <li><strong>Controllers.js</strong>: Added a method to log mouse events</li>
  <li><strong>phone-details.html</strong>: Added <em>ng-mouseenter</em> and <em>ng-mouseleave</em> handlers</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $scope.logMouseEvent = function() {
          switch (event.type) {
            case "mouseenter":
              console.log("Hey Mouse Entered");
              break;
  
            case "mouseleave":
              console.log("Mouse Gone");
              break;
  
            default:
              console.log(event.type);
              break;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="phone-thumbs"&gt;
    &lt;li ng-repeat="img in phone.images"&gt;
      &lt;img ng-src="{{img}}" ng-Click="setImage(img)" ng-mouseenter="logMouseEvent()" ng-mouseleave="logMouseEvent()"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Result:</h2>
  
  <p>Only <strong>mouseover</strong> and <strong>mouseout</strong> event being logged  </p>
  
  <h2>Question:</h2>
  
  <p>Is this behavior happening because images are <strong>ul</strong> element and we are moving mouse in child elements? and How can I get <strong>mouseenter</strong> event on image? </p>
  
  <p>Thank you 
  <img src="https://i.stack.imgur.com/WnGb3.png" alt="enter image description here"></p>