title: How to add and remove class of one element while hovering over another element via Angular?
body: <p>I'd like to add a class to an <code>&lt;li&gt;</code> when it's child <code>&lt;a&gt;</code> gets hovered over but I can't seem to get it to work. What is happening is that no matter what <code>&lt;a&gt;</code> element is hovered over, only the first <code>&lt;li&gt;</code> gets affected so I need to be able to target only the parent <code>&lt;li&gt;</code> of the <code>&lt;a&gt;</code> that is currently being hovered over.</p>
  
  <p>Here is what I have so far: </p>
  
  <p><a href="http://jsfiddle.net/faGTg/39/" rel="nofollow">http://jsfiddle.net/faGTg/39/</a></p>
  
  <p>and here is the code:</p>
  
  <p><strong>Controller</strong> (Javascript)</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  myApp.controller("Ctrl", function($scope){
      $scope.addClass = function(){
          angular.element(document.querySelector('.li-hover')).addClass('hovering');
      }
      $scope.removeClass = function(){
          angular.element(document.querySelector('.li-hover')).removeClass('hovering');
      }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-app='myApp'&gt;
      &lt;div ng-controller="Ctrl"&gt;
          &lt;ul&gt;
              &lt;li class="li-hover" &gt;
                  &lt;a href="" ng-mouseover="addClass()" ng-mouseleave="removeClass()"&gt;
                      &lt;span&gt;Home&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="li-hover" &gt;
                  &lt;a href="" ng-mouseover="addClass()" ng-mouseleave="removeClass()"&gt;
                    &lt;span&gt;About&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="li-hover" &gt;
                  &lt;a href="" ng-mouseover="addClass()" ng-mouseleave="removeClass()"&gt;
                    &lt;span&gt;Contact&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.hovering {
      background-color: pink;
      border-bottom: 5px solid red;
  }
  li {
      margin: 1em;
      padding: 2em;
      border-bottom: 5px solid #aaa;
      background: #ccc;
  }
  a { 
      background: white;
      padding: 0.5em;
  }
  </code></pre>