title: Testing CSS :hover with Jasmine
body: <p>So i've a simple div that when hovered will change its background as defined in my css:</p>
  
  <pre><code>.my-class{
      background-color:#FFFFFF;
  }
  .my-class:hover{
      background-color:#F2F2F2;
  }
  </code></pre>
  
  <p>I've tried to test this behavior with jasmine but tests keep failing:</p>
  
  <pre><code>it "Shadows .soboo-drop-item when hover", -&gt;
        $('.my-class:first').trigger('mouseover')
        expect($('.my-class:first').css('background-color')).toBe("#F2F2F2")
  </code></pre>
  
  <blockquote>
    <p>Expected 'rgba(0, 0, 0, 0)' to be '#F2F2F2'</p>
  </blockquote>
  
  <p>Running <code>$('.my-class:first').trigger('mouseover')</code> on console seems not working - background color doesn't change.</p>
  
  <p>Note: Hover JQuery behaviors do respond to <code>$('#something').trigger('mouseover')</code></p>
  
  <p>Im using <a href="https://github.com/bradphelan/jasminerice" rel="noreferrer">Jasminerice</a>, which includes <a href="https://github.com/velesin/jasmine-jquery" rel="noreferrer">Jasmine-JQuery</a></p>
  
  <p>Jasmine-JQuery has a method to test css:</p>
  
  <pre><code>expect($('.my-class:first')).toHaveCss({"background-color": "#F2F2F2"})
  </code></pre>
  
  <p>which gives me:</p>
  
  <pre><code>Expected '&lt;div class="soboo-service my-class"
  service="google"&gt;&lt;img
  src="http://localhost:3000/img/bookmark-services/google.gif"&gt; Google
  Book...&lt;/div&gt;' to have css { background-color : '#F2F2F2' }
  </code></pre>
  
  <p>How to check this background?
  Thanks in advance =)</p>