title: Script to change text colours on hover works in Firefox but not other browsers
body: <p>I have the following script which randomly assigns different colours (from an array) to letters in a DIV and changes these colours on hover.  The script is supposed to change the colours back when the mouse leaves the DIV (i.e. when no hover). It is doing so in Firefox, but not in other browsers (Safari, Chrome and IE).  Also the click function isn't working properly in these browsers either (again it is in Firefox).</p>
  
  <p>You can see the script in action <a href="http://monthlymixup.com/test.html" rel="nofollow">here</a>.</p>
  
  <p>I wonder if someone can help troubleshoot this?</p>
  
  <p>Thanks,</p>
  
  <p>Nick</p>
  
  <pre><code>$(document).ready(function() {
    var test = $("#example p").text().split('');
  
      var normal = generateColors(test);
      var hover = generateColors(test);
      $("#example p").html(normal);
  
      $("#example").hover( 
        function(event) { $("#example p").html(hover) }, 
        function(event) { $("#example p").html(normal) });
  
      $("#example").click(function() { 
      location.href = "http://www.google.co.uk"; 
      });
  
  });
  
  function generateColors(characters) {
      var result = "";
      var i = 0;
      for(i=0; i &lt; characters.length; i++) {
          result += "&lt;span style='color:"+getColor()+"'&gt;"+characters[i]+"&lt;/span&gt;";
      }
  
     return result;
  }        
  
  function getColor() {
      var colList = ['#7EA404', '#14AFB0','#B05718', '#B0A914', '#B01617','#902BB0', '#B003A2', '#4A429C','#33821E', '#226795', '#D0B600','#886833'];
  
      var i = Math.floor((Math.random()*colList.length));
    return colList[i];
  }
  </code></pre>