CODEWITHSUNDEEP
jqueryhtmltoggle
Rimsky
Rimsky

Reputation: 1

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</div>

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

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

Upvotes: 0

Views: 293

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 185963

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.

Upvotes: 1

Sang Suantak
Sang Suantak

Reputation: 5265

Is this what you're looking for?

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

Upvotes: 0

markijbema
markijbema

Reputation: 4055

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 ;}

Upvotes: 0

Related Questions