jquery hover element swaping elements
<p>I am trying to use jquery hover element to swap in and out two elements-- a spanish heading and text with an english heading and text. I want the spanish heading and text to be on the page first, and then have the english heading and text appear (and hide both spanish elements) when you hover over the heading. When you move off the heading, I want the page to go back to normal with just the spanish text/header-- no english. I have it half working but i can't get the spanish text to stay hidden when the english appears...Any suggestions? (it also seems like all my functions don't work at the same time the first time... what am i doing wrong?)</p>

<pre><code>     &lt;style type="text/css"&gt;
    .notshown{display:none;}
    &lt;/style&gt;  
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript"&gt; 

    $(document).ready(function() {
    $('#hd').hover(function() {
    $($('h3').html('English')).show();
    }, function(){
    $($('h3').html('Spanish')).show();

    $('#hd').hover(function() {
    $('.notshown').show();
    }, function(){
    $('.notshown').hide();
    });
    });
    });
    &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;h2 id="hd"&gt;Hover over this title to switch from Spanish to English&lt;/h2&gt;

   &lt;h3&gt;Spanish&lt;/h3&gt;
   &lt;div title="spanish" style="margin-right:400px"&gt;
   "Hola! Uno, dos, tres"
   &lt;/div&gt;

   &lt;div title="english" style="margin-right:400px" class="notshown"&gt;
   "Hi! One, Two Three"
   &lt;/div&gt;
   &lt;/div&gt;
</code></pre>
