title: Changing color of letters one by one in a html text when hovering
body: <p>Now that my brain aches after trying by myself and searching all over without finding any answer. 
  i ask you.</p>
  
  <p>I am trying to change the colors of the single letters in a text which is contained inside a <code>&lt;h5&gt;Hello&lt;/h5&gt;</code> When the pointer is hovering over each single one, I can manage this by spamming alot of <code>&lt;span&gt;&lt;/span&gt;</code> and put letter by letter inside each <code>&lt;span&gt;&lt;/span&gt;</code>, then using CSS to just change color when hovering.</p>
  
  <p><em>BUT</em></p>
  
  <p>I want to do this by using Javascript.
  Here i've accomplished extracting every single letter in a <code>&lt;h5&gt;</code>, but I am not getting them to change color when I hover each one of them.</p>
  
  <pre class="lang-js prettyprint-override"><code>$('h6').ready(
      function () {
          var T = $('h6').text();
              for (letters in T) {
                  $(T[letters]).hover(
                      function () {
                          $(T[letters]).toggle("color", "red");
                      })
               }
  
  });
  </code></pre>
  
  <p>So with the great help of <strong>GolezTrol</strong> i achieved victory doing what i wanted to do!
  Though i use Css instead of the javascript to handle the hover =)</p>
  
  <p><strong><em>result - java - syntax</em>:</strong></p>
  
  <pre><code>$(function () {
      $('h2').each(
      function () {
          //Extract text from html, and attach it to "Txt" variable.
          var Txt = $(this).text();
          //Empty var-string waiting for loop.
          var Gtxt = '';
          //Loop through text to add &lt;span id="green&gt; on every letter.
          for (i in Txt) {
              //add letter by letter to Gtxt ( &lt;span id="green"&gt; letter &lt;/span&gt; )
              Gtxt = (Gtxt + '&lt;span id="green"&gt;' + Txt[i] + '&lt;/span&gt;');
  
              //IF for Newline on period.
              if (Txt[i] == '.') {
                  Gtxt = (Gtxt + '&lt;br&gt;');
              }
          }
          //Add processed text to Html $('h2')
          $(this).html(Gtxt);
      });
  });
  </code></pre>
  
  <p><strong><em>CSS:</em></strong></p>
  
  <pre><code>#green{
      color: "color"
  }
  
  #green:hover{
      color: "green"
  }
  </code></pre>