title: How to click on element if it is visible only after Mouse Over on to it?
body: <p>I am trying to click on delete button which will be visible only if Hover Over the ng-repeat element.</p>
  
  <pre><code>HTML:
  
  &lt;div id="email-templates" class="email-templates" ng-repeat="template in templateList | orderBy: 'display_name'"&gt;
      &lt;div class="template-name" aria-label="Changed Name" uib-tooltip="Changed Name" "="" ng-click="loadTemplate(template)" role="button" tabindex="0"&gt;
          &lt;span&gt;Changed Name&lt;/span&gt;
          &lt;div class="list-icon-container"&gt;
              &lt;i class="template-delete template-report-icon icon delete-icon" tabindex="0" aria-label="Delete an Email Template" uib-tooltip="Delete an Email Template" ng-click="deleteTemplate(template)" role="button"&gt;&lt;/i&gt;
              &lt;i class="template-report-icon icon angle-right-icon icon-xs" tabindex="0"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  
     EmailTemplates Property File :
  
  this.templateList = element.all(by.repeater("template in templateList"));
  this.templateName = this.templateList.all(by.css('[ng-click="loadTemplate(template)"]'));
  this.deleteBtn = this.templateName.all(by.css('[ng-click="deleteTemplate(template)"]'));
  this.confirmDelete = element(by.css('button[translate="ZillaMain.DeleteModalConfirmButton"]'));
  
  Test File: 
  var EmailTemplates = require('../../.././pages/EmailTemplates');
  
  describe('AddEmailTemplate-', function() {
  it(TestSuiteName + 'Verify that User is able to Delete a Template', function() {
    var TempName = 'Test';
    EmailTemplates.templateName.getAttribute("aria-label").then(function(labels) {
      EmailTemplates.templateList.count().then(function(total) {
          console.log("total no of Email temp=" +total);
          for (var i = 0; i &lt; total; i++) {
              if (labels[i] === TempName) {                    
                  console.log("Template Name found delete it :" +i);
                  browser.actions().mouseMove(EmailTemplates.templateName.get(i)).perform().then(function(){
                                              browser.actions().mouseMove(EmailTemplates.deleteBtn.get(i)).click();
                          EmailTemplates.confirmDelete.click();
                          });
  
                  } 
              }
         });
      });
    });
  });
  </code></pre>
  
  <p>this gives me error every time: <strong><em>Failed: Index out of bound. Trying to access element at index: 5, but there are only 5 elements that match locator By(css selector, [ng-click="deleteTemplate(template)"])</em></strong> or <strong><em>element not visible.</em></strong></p>