Need help with javascript on specific effect
<p>As I am new to javascript:</p>

<p>I would like to change onmouseover one div id with another div id. On mouse out everything would go back. I was looking and tried this online for several hours with no luck.</p>

<p>Trying this:</p>

<pre><code>    &lt;script&gt;

$('.one').hover(

function() {

$('.two').attr('id', 'header-email'); //box two's ID becomes box one
$(this).attr('id', 'header-email2'); //box one's ID becomes box two
}, function() {

$('.two').attr('id', 'header-email2'); 
$(this).attr('id', 'header-email');

}); //end hover one

$('.two').hover(

function() {

$('.one').attr('id', 'header-email2'); //box two's ID becomes box one
$(this).attr('id', 'header-email'); //box one's ID becomes box two

}, function() {

$('.one').attr('id', 'header-email');
$(this).attr('id', 'header-email2');

 }); //end hover one

&lt;/script&gt;
</code></pre>

<p>my html:</p>

<pre><code> &lt;div id="header-email"  class="one" style="visibility: visible;"&gt;textinhere&lt;a href="mailto:tips@email.net"&gt;tips@email.net&lt;/a&gt;&lt;/div&gt;
        &lt;div id="header-email2" class="two" style="visibility:hidden;"&gt;textinhere&lt;span&gt;&lt;br&gt;sometext&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>still no luck..</p>
