reemplazar un div con otro en el hover

Quiero reemplazar un div por otro cuando esté sobre él. Específicamente, habrá un promedio en palabras, como “forcejeo” o “superando las expectativas”, y quiero reemplazarlo con el promedio numérico cuando el usuario supera el promedio en palabras.

#html 
A+ (hover to see score)
AVG = 98.35%
#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(); });

Es bastante fácil ocultar el primer div y reemplazarlo con el segundo, pero el problema está en el código para que las cosas vuelvan a la normalidad cuando finalice el desplazamiento. Ahora en modo estacionario, los div solo parpadean entre sí.

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

Mueva la clase switch a un div externo, como así

 
A+ (hover to see score)
AVG = 98.35%
$('.switch').hover(function() { $(this).find('.avg_words').hide(); $(this).find('.avg_num').show(); }, function() { $(this).find('.avg_num').hide(); $(this).find('.avg_words').show(); });

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

El parpadeo es el resultado de la forma en que configura sus clases. Como .switch y .avg_words son exactamente el mismo elemento, esto es lo que sucede:

  1. Usted se .switch
  2. .avg_words está oculto, lo que significa que .switch está oculto (¡es la misma div!)
  3. Ya que .switch está oculto, ya no lo estás .switch
  4. .avg_words se muestra inmediatamente
  5. Ahora está flotando .switch nuevamente porque se acaba de mostrar (en el paso 4)
  6. volver al paso 1

En su lugar, asegúrese de que .switch sea ​​un elemento envuelto alrededor de .avg_words , para que no se oculte una vez que lo desplace.

Tiene problemas porque está ocultando el mismo elemento que está vinculado al evento de desplazamiento. Intenta cambiar tu marca:

 
A+ (hover to see score)
AVG = 98.35%

Luego cambia tu javascript a algo como esto:

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

mouseout mouseover y mouseout para eso:

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