заменить один div другим на зависание

Question

Я хочу заменить один div другим при наведении на него. В частности, будет среднее число слов, таких как «борьба» или «превышение ожиданий», и я хочу заменить это на числовое среднее, когда пользователь наводит курсор на среднее значение в словах.

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

Это достаточно легко, чтобы скрыть первый DIV и заменить его со вторым, но беда с кодом, чтобы установить вещи в нормальное состояние, когда при наведении курсора концы. Теперь на hover, div s просто моргают между собой.

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

Answer 1

Переместите класс переключатель к Outter DIV, как и

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

Обновлено Fiddle: http://jsfiddle.net/uXeg2/2/

Answer 2

мигающего является результатом того, как вы создали классы. Поскольку .switch и .avg_words являются точно таким же элементом, это то, что происходит:

1. Вы парить .switch
2. .avg_words скрыты, что означает .switch скрыт (это же ДИВ!)
3. Поскольку .switch скрыт вы не парит его больше
4. .avg_words показан сразу
5. вы теперь парит .switch снова, потому что это было только что показано (на этапе 4)
6. назад к шагу 1

Вместо этого убедитесь .switch элемент обернут вокруг .avg_words, так что он не получает скрытый когда вы наведете его.

Answer 3

Вы сталкиваетесь с проблемами, потому что вы скрываете и тот же элемент, который привязан к событию парения. Попробуйте изменить разметку:

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

Затем изменить свой JavaScript, чтобы что-то вроде этого:

$('.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 4

Я хотел бы использовать mouseover и mouseout для этого:

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

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