title: Hover over element with CasperJS
body: <p>How to perform click event on the element which becomes visible after hovering on an element.
  below is the HTML code</p>
  
  <pre><code>&lt;div class="jqtree-element jqtree_common"&gt;
  &lt;span class="jqtree-title jqtree_common" contenteditable="true"&gt;Notebook 1&lt;/span&gt;
  &lt;span class="notebook-right"&gt;
  &lt;span class="notebook-date disappear" style="visibility: visible;"&gt;
  &lt;span class="notebook-commands-right"&gt;
  &lt;span class="notebook-commands appear-wrapper"&gt;
  &lt;span class="notebook-commands appear" style="display: none;"&gt;
  &lt;span class="fontawesome-button info"&gt;
  &lt;span class="fontawesome-button history"&gt;
  &lt;span class="fontawesome-button private"&gt;
  &lt;span class="fontawesome-button public" style="display: none;"&gt;
  &lt;span class="fontawesome-button remove"&gt;
  &lt;i class="icon-remove"&gt;&lt;/i&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To delete the Notebook i am using following code</p>
  
  <pre><code>casper.then(function(){
    if(this.visible({type:'xpath', path:'/html/body/div[3]/div/div[1]/div[1]/div/div/div[1]/div[2]/div/div/ul/li[1]/ul/li[1]/ul/li[11]/div/span[2]/span[3]/span/span[5]/i'}))
    {
      this.click({type:'xpath', path:'/html/body/div[3]/div/div[1]/div[1]/div/div/div[1]/div[2]/div/div/ul/li[1]/ul/li[1]/ul/li[11]/div/span[2]/span[3]/span/span[5]/i'});
      });
      console.log('notebook '+ title +' deleted');
    } else {
       console.log('element not found');
    }
  });
  </code></pre>
  
  <p>in console it is displaying "Cannot dispatch mousedown event.. "</p>