Toggle between Divs containing classes

How would I simply replace <div class="one"> with the following <div class="two"> when I hover over it and vice versa? (<div class="two"> will be replaced with <div class="one"> on mouseleave)

Here is the markup:

<div class="one">content1</div>
<div class="two">content2</开发者_JS百科div>

<div class="one">content3</div>
<div class="two">content4</div>

<div class="one">content5</div>
<div class="two">content6</div>, etc....

Is this OK? http://jsfiddle.net/simevidas/vjxBK/2/

$('div.one').mouseenter(function() {
    $(this).hide().next().show();
});

$('div.two').mouseleave(function() {
    $(this).hide().prev().show();    
}

Note that in order for this solution to work, the .one and .two DIV pairs have to have equal heights. Otherwise the cursor might not be over the .two element once .one is hidden in which case the mouseleave event would not fire.

If you hover over div one, and then let it disappear, you're not hovering over it anymore. I'd suggest html like this for instance:

<div class="outer"><span class="first">content1<span>
<div class="inner">content2</div>
</div>

And then in css something like:

.outer .first {display: block;}
.outer .inner {display: none ;}

.outer:hover .first {display: none;}
.outer:hover .inner {display: block ;}

Is this what you're looking for?

   $(".one").hover(
        function(){
            $(this).toggleClass("two","one");
        },
        function(){    
            $(this).toggleClass("two","one");
        }
    );