replace one div with another on hover

12,521

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

Solution 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.

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


Solution 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();
});

Solution 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();
});
Share:
12,521
dax
Author by

dax

Updated on June 23, 2022

Comments

  • dax
    dax over 1 year

    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/

  • dax
    dax about 10 years
    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!
  • Andrew Grothe
    Andrew Grothe about 10 years
    find searches within the context of your selector, which you didn't have as both divs where on the same level. Nesting doesn't always make code pretty, but sure does help in cases like this.
  • Zathrus Writer
    Zathrus Writer about 10 years
    @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 ;)
  • Andrew Grothe
    Andrew Grothe about 10 years
    true enough. I just try to avoid writing code like that myself, but it's just a personal preference I guess.