title: .hover and .click, different functions on same div, Jquery
body: <p>I want to Show "1" when hovering "Toggle 1", and show "2" when I click "Toggle 1". 
  I also want to create a rule, where "Toggle 2" would show "3" on hover and "4" on click.
  I put the closing div for "hover (toggle 1) behind "front (2)" to be able to click 2 to toggle as well. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="hover"&gt;Toggle 1
  &lt;div class="front" style="display:none"&gt;2&lt;/div&gt;&lt;/div&gt;
  &lt;div class="back" style="display:none"&gt;1&lt;/div&gt;
  
  &lt;div class="hover"&gt;Toggle 2
  &lt;div class="front" style="display:none"&gt;4&lt;/div&gt;&lt;/div&gt;
  &lt;div class="back" style="display:none"&gt;3&lt;/div&gt;
  
  &lt;script&gt;
  
  $("div.hover").click(function () {
  $("div.front").toggle( );
  });
  
  $("div.hover").hover(
  function() { $(this).children("div.back").show(); },
  function() { $(this).children("div.back").hide(); }
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>