title: hover property for text not working
body: <p>On mouse hover of the text CRM a pop up opens up. When I mouse hover the text the text color should change – the color of the text should become red on hover.</p>
  
  <p>I've provided my code below.</p>
  
  <p>I gave the hover property to my class but it's not working. How do I fix it?</p>
  
  <p><a href="http://jsfiddle.net/a5tjG/3/embedded/result/" rel="nofollow">http://jsfiddle.net/a5tjG/3/embedded/result/</a></p>
  
  <pre><code>.cubeTextStyleCRM:hover {
      color: red;
  }
  $('document').ready(function() {
                  window.setTimeout(function() {
                      $('.cubeCellCRM').each(function() {
                          var htmlText = $(this).attr('data-text');
                          $(this).append('&lt;div class="cubeTextStyleCRM"&gt;' + htmlText + '&lt;/div&gt;');
  
                          $(this).hover(
  
                          function() {
                              $(".cubeTextStyleCRM").append("&lt;span class='divStock'&gt;Customer Relationship Management&lt;/span&gt;");
  
                          },
  
                          function() {
                              $(this).find("span:last").remove();
                          });
                      });
                  }, 600);
  
              });
  
  &lt;div class="cubeCellCRM" data-text="CRM" data-caption="
                                  &amp;lt;a style='padding-left: 40px; font-size: 14px; color: grey;' href='#' &amp;gt;Create&amp;lt;/a&amp;gt; &amp;lt;div&amp;gt; 
                                  &amp;lt;a style='padding-left: 40px; font-size: 14px; color: grey;' href='#' &amp;gt;View/Edit&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; 
                                  &amp;lt;a style='padding-left: 40px; font-size: 14px; color: grey;' href='#' &amp;gt;Reports&amp;lt;/a&amp;gt;"
                          data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/CRM.png"&gt;&lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>