7

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/

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
dax
  • 10,779
  • 8
  • 51
  • 86

5 Answers5

11

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/

Andrew Grothe
  • 2,562
  • 1
  • 32
  • 48
  • 1
    find searches within the context of your selector, which you didn't have as both `div`s where on the same level. Nesting doesn't always make code pretty, but sure does help in cases like this. – Andrew Grothe Sep 27 '13 at 15:24
4

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.

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
  • i thought that might be part of the problem - i was playing with that for awhile but couldn't get things to work because of the layers of divs. (couldn't figure out the right arrangement of `next` to use). thanks! – dax Sep 27 '13 at 15:12
4

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
}
Benoit74B
  • 1,815
  • 13
  • 11
2

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();
});
Divey
  • 1,699
  • 1
  • 12
  • 22
1

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();
});
Zathrus Writer
  • 4,311
  • 5
  • 27
  • 50
  • @agrothe not really, hover works for the same element, this alternative works on mouse-over for the first one, then on mouse-out for the second one ;) – Zathrus Writer Sep 27 '13 at 15:29
  • true enough. I just try to avoid writing code like that myself, but it's just a personal preference I guess. – Andrew Grothe Sep 27 '13 at 15:35