replace one div with another on hover

Question

I want to replace one div with another when hovering over it. Specifically there will be an average in words, such as "struggling" or "exceeding expectations", and I want to replace this with the numerical average when the user hovers over the average in words.

#html

<div class="switch avg_words float_left">
  A+ (hover to see score)  
</div>
<div class="avg_num">
  AVG = 98.35%
</div>

#css

.avg_num {
display: none;
}

#jquery

$('.switch').hover(function() {
    $(this).closest('.avg_words').hide();
    $(this).next('div').closest('.avg_num').show();
}, function() {
    $(this).next('div').closest('.avg_num').hide();
    $(this).closest('.avg_words').show();
});

It's easy enough to hide the first div and replace it with the second, but the trouble is with the code to set things back to normal when hover ends. Now on hover, the divs just blink back and forth between each other.

http://jsfiddle.net/uXeg2/1/

Answer 1

Move the switch class to an outter div, like so

<div class="switch">
<div class="avg_words float_left">
  A+ (hover to see score)  
</div>
<div class="avg_num">
  AVG = 98.35%
</div>
</div>

$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});

Updated Fiddle: http://jsfiddle.net/uXeg2/2/

Answer 2

The blinking is a result of the way you set up your classes. Because .switch and .avg_words are the exact same element, this is what happens:

1. You hover .switch
2. .avg_words is hidden, which means .switch is hidden (it's the same div!)
3. Since .switch is hidden you are not hovering it anymore
4. .avg_words is shown immediately
5. You are now hovering .switch again because it was just shown (in step 4)
6. back to step 1

Instead, make sure .switch is an element wrapped around .avg_words, so that it does not get hidden once you hover it.

Answer 3

This could be done in pure CSS as well, no need to rely on JQuery :

#html
<div class="switch">
<div class="avg_words float_left">
  A+ (hover to see score)
</div>
<div class="avg_num">
  AVG = 98.35%
</div>
</div>

#css
.avg_words {
  display:block
}

.avg_num {
  display:none
}

.switch:hover .avg_words {
  display:none
}

.switch:hover .avg_num {
  display:block
}

Answer 4

Your running into problems because you're hiding the same element that is bound to the hover event. Try changing your markup:

<div class="switch float_left">
    <div class="avg_words">
        A+ (hover to see score)  
    </div>
    <div class="avg_num">
      AVG = 98.35%
    </div>
</div>

Then change your javascript to something like this:

$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});

Answer 5

I'd use mouseover and mouseout for that:

$('.switch .avg_words').mouseover(function() {
    $(this).hide();
    $(this).closest('.avg_num').show();
});

$('.switch .avg_num').mouseout(function() {
    $(this).hide();
    $(this).closest('.avg_words').show();
});