title: Change DIV content on mouse-over
body: <p>I have an existing script i've been using for content display. Currently it works when you click on a link. Is it possible to modify it to work on mouse-over instead of a click.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/vfq2L/" rel="nofollow">fiddle</a>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#" id="1"&gt;&lt;div class="block"&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#" id="2"&gt;&lt;div class="block"&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#" id="3"&gt;&lt;div class="block"&gt;&lt;/div&gt;&lt;/a&gt;
  
  &lt;div class="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$( document ).ready(function() {
      $('#1').click(); 
  });
  
  $('#1').click(function() {
    $('.content').html('This is a text example 1');
  });
  
  $('#2').click(function() {
    $('.content').html('This is a text example 2');
  });
  
  $('#3').click(function() {
    $('.content').html('This is a text example 3');
  });
  </code></pre>