title: Disable ng-mouseover on click
body: <p>I have a table list of 10 elements floated left, and when you hover over any of the rows, it displays that object in more detail in the div on the right hand side of the page. </p>
  
  <p>I would like to have it so you can also click on one of those rows, it focuses on that row, showing it on the right hand side and disabling the hovers on other rows until you click off/do something etc. </p>
  
  <p>I've had a look at <a href="https://stackoverflow.com/questions/31132318/ng-mouseover-on-disabled-button-in-angularjs">ng-mouseover on disabled button in Angularjs</a>, but that answer uses css - not sure how to incorporate that into my code (Completely restructuring it is an option! :( )</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;/div&gt;
      &lt;div class="row" ng-show="resultsExist"&gt;
          &lt;div class="col-lg-6 col-md-6"&gt;
              &lt;table class="table"&gt;
                  &lt;tr ng-repeat="doc in docs" ng-init="index = $index + 1" ng-mouseenter="hoverFocus(doc)" ng-click="clickFocus(doc)"&gt;
                      &lt;td&gt;{{index}}&lt;/td&gt;
                      &lt;td&gt;{{doc.headline.main}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-6"&gt;
              &lt;div ng-show="showInfo"&gt;
                  &lt;p&gt;Publication Date: {{infoDoc.pub_date}}&lt;/p&gt;
                  &lt;h2&gt;{{infoDoc.headline.main}}&lt;/h1&gt;
                  &lt;h3&gt;{{infoDoc.lead_paragraph}}&lt;/h3&gt;
                  &lt;p&gt; Source: {{infoDoc.source}}&lt;/p&gt;
                  &lt;button target="_blank" href="{{infoDoc.webUrl}}"&gt; See full link here&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$scope.hoverFocus = function(doc) {
          $scope.showInfo = true;
          $scope.infoDoc = doc;
      }
  $scope.clickFocus = function() {
      // Not sure
  }
  </code></pre>
  
  <p>Any help would be appreciated, not sure how to continue with this!</p>
  
  <p>EDIT: Took me a while but here's a fiddle showing a more basic overview. <a href="http://jsfiddle.net/v7hx8nho/3/" rel="nofollow noreferrer">http://jsfiddle.net/v7hx8nho/3/</a> On hover show title of that item, on click show that item and no more hover until you click off. </p>