title: Add class to child of li element on hover with jQuery
body: <p><strong>Problem:</strong>
  I would like to add a class to a child of an li element when it is hovered.</p>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;li class="active"&gt;
      &lt;a href="index.html" title="Homepage"&gt;Homepage&lt;i class="icon-home"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>jQuery code:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function()
      {
          $('li[ class="active" ]').hover(
              function(){ $(this).addClass('icon-white') },
              function(){ $(this).removeClass('icon-white') }
          )
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Desired result:</strong></p>
  
  <pre><code>&lt;li class="active"&gt;
      &lt;a href="index.html" title="Homepage"&gt;Homepage&lt;i class="icon-home icon-white"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>Code for adding a class to a specific element:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function()
      {           
          if ($('#main-nav &gt; li').hasClass('active') == true)
          {
              $("a &gt; i", this).addClass('icon-white');
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>UPDATE (Final solution):</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function()
      {
          $('#main-nav li').hover(function() 
          {
              if ($(this).hasClass('active') != true)
              {
                  $('a', this).find('i').toggleClass('icon-white');   
              }
          });
  
          $("#main-nav li.active &gt; a &gt; i").addClass('icon-white');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>