title: Selenium WebDriver MoveToElement - hidden element, hover and toggleClass
body: <p>Selenium WebDriver: 2.35. 
  FireFox: 25.0</p>
  
  <p>I want to move the mouse over a div which will causes a hidden image to become visible, then click the image. I have read the posts <a href="https://stackoverflow.com/a/17294390/746754">here</a>, <a href="https://stackoverflow.com/questions/14692607/how-to-mouseover-on-a-webelement">here</a>, <a href="https://stackoverflow.com/questions/15339311/how-to-do-mouse-hover-using-selenium-webdriver-in-firefox-19">here</a> and others. The general answer is to do something of the form: </p>
  
  <pre><code>action.moveToElement(we).moveToElement(webdriver.findElement(By.xpath("/expression-here")).click().build().perform();
  </code></pre>
  
  <p>However, this doesn't work in the example below: </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="bb_testDiv"&gt;
      &lt;img class="bb_matchImgTest bb_standardHidden" src='@Url.Content( "~/images/match.png" )' alt='Match'/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript/jquery:</p>
  
  <pre><code> $( document ).on( 'hover', '#bb_testDiv', function ()
   {           
       $( this ).find( '.bb_matchImgTest' ).toggleClass( 'bb_standardHidden' );
   } )        
   $( document ).on( 'click', '.bb_matchImgTest', function ()
   {
       alert('here');
   } )
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bb_standardHidden
  {
      visibility:hidden;
  }
  </code></pre>
  
  <p>C# test code:</p>
  
  <pre><code>IWebElement testDiv = WebDriver.FindElement( By.Id( "bb_testDiv" ) );            
  Actions builder = new Actions( WebDriver );
  Actions hoverClick = builder.MoveToElement( testDiv ).MoveToElement( testDiv.FindElement( By.ClassName( "bb_matchImgTest" ) ) ).Click();
  hoverClick.Build().Perform();
  </code></pre>
  
  <p>The problem is that the click event is not fired. Also, the element is left visible, so any subsequent mouseover hides it. Of course, this all works fine with manual testing.</p>
  
  <p>The problem seems to be with the hover event. If I break this into two events - mouseenter and mouseleave (instead of hover) with addClass and removeClass (instead of toggleClass) then it works. Just wondering if it is possible to get this working with hover?</p>